JavaScript event.target только сообщает о дочернем (MooTools) - PullRequest
Новая
       33

JavaScript event.target только сообщает о дочернем (MooTools)

1 голос
/ 22 мая 2011

Мне кажется, что-то в корне неправильно.У меня есть этот HTML 

<div id="thumbnails">
    <a href="#image-0">
        <img src="blabla-1.jpg" />
    </a>
    <a href="#image-0">
        <img src="blabla-1.jpg" />
    </a>
    <a href="#image-0">
        <img src="blabla-1.jpg" />
    </a>
</div>

и этот JavaScript (используется библиотека MooTools) 

document.id('thumbnails').getElements('a').each(function(image_link, image_link_index)
{
    image_link.addEvent('click', function(evt)
    {
        if (evt.target.get('tag') == 'a')
        {
            evt.stop();
            console.log('a tag', evt.target);
        }

        console.log(':-(', evt.target);
    });
});

Странно, я никогда не получаю этот элемент.Я уверен, что я неправильно понимаю что-то базовое здесь.

Вы можете поиграть с кодом на http://jsfiddle.net/maryisdead/kHBE3/8/

Ответы [ 2 ]

3 голосов
/ 22 мая 2011

почему ты изобретаешь колесо?делегирование событий не является чем-то легким, и вы должны использовать встроенное делегирование событий (начиная с 1.4.1) http://mootools.net/docs/core/Element/Element.Delegation

ваш код изменится на: 

document.id('thumbnails').addEvent('click:relay(a)', function(evt, el) {
    evt.stop();
    console.log(':-)', el.get("tag") == 'a', this.get("tag") == 'a');
});

где псевдо relay() может взять любой селектор, например, например.a.foo или a [href = #]

имейте в виду, что в 1.2 делегирование событий было своего рода экспериментальным и несколько менее совершенным - когда дело дошло до mouseover:relay() или focus:relay(input[type=text]), вы можете получить некоторыенеожиданные результаты в разных браузерах - проблемы, устраненные в 1.3.2 iirc.Кроме того, change события на флажках и радио в старых ie6 / 7/8 возвращаются к onpropertychange и могут не пузыриться.

в любом случае вам не удастся перейти на якорную ссылку как event.target, так как само событие ПЫЛАЕТСЯ сверху вниз.то есть он начнется с img > a > thumbnails, но не вызовет разные события для обоих - он будет одинаковым event.target на обоих 3 элементах -> this === a

что вы можете сделатьхотя console.log(this.get("tag") === 'a')); // true - хотя первоначальной целью был ребенок this

1 голос
/ 22 мая 2011

Если вы собираетесь использовать event внутри своего кода, вам нужно иметь аргумент с именем event, а не evt.Исправьте это, и вы должны быть в порядке.

Я понятия не имею, почему это не работает.Событие запускается на изображении внутри ссылки, а не на самой ссылке, которая выглядит просто странно.

Единственное, что я могу предложить (это не исправляет), это более простой способ выбора элементов.. 

$$('#thumbnails > a').each(...

Я также попытался переписать тот же код, чтобы использовать мой собственный инструментарий, похожий на jQuery.У него все еще есть та же проблема, что означает, что это что-то специфическое для JavaScript, а не для MooTools.

Вы можете попробовать if (evt.target.parentNode.get('tag') == 'a')

...