mootools останавливает всплывающее событие при использовании Event.Delegation (: relay) - PullRequest
Новая
       11

mootools останавливает всплывающее событие при использовании Event.Delegation (: relay)

2 голосов
/ 24 октября 2011

Я добавляю события в ссылки, которые загружаются через ajax. Вот упрощенный пример HTML: 

<div class="ajax-content">
  <div class="parent">
    <a href="#" class="event-link">Click here</a>
  </div>
</div>

Весь контент в .ajax-content загружается через ajax. Я не хочу, чтобы событие click для ".event-link" всплывало до ".parent". Если бы он не был загружен через ajax, я мог бы сделать это: 

$$('.event-link').addEvent('click', function(event){
  event.stopPropagation();
  event.preventDefault();
  //do stuff
});

Однако я не могу понять, как выполнить то же поведение с помощью (click: relay). Вот что я пытаюсь: 

$$('.ajax-content').addEvent('click:relay(.event-link)', function(event){
  event.stopPropagation();
  event.preventDefault();
  //do stuff
});

Как предотвратить запуск события click для «.parent»? (Я также пробовал другой синтаксис - event.stop () и возвращал false, но у них были те же результаты.)

Ответы [ 2 ]

5 голосов
/ 25 октября 2011

учитывайте порядок DOM и порядок распространения события сверху вниз по дереву DOM: 

<div class="ajax-content">
  <div class="parent">
    <a href="#" class="event-link">Click here</a>
  </div>
</div>

вы присоединяете событие к div.ajax-content (делегат).Это означает, что к тому времени, когда он поражает его, он уже должен пройти через a.event-link, затем div.parent и, наконец, до div.ajax-content.тогда нет смысла его останавливать, div.parent все равно будет первым:

http://jsfiddle.net/dimitar/ChrCq/

вот что происходит, когда вы останавливаете событие из .parent до того, как оно достигнет делегатора:

http://jsfiddle.net/dimitar/ChrCq/1/

делегирование не без недостатков, я боюсь:)

Вы можете также прочитать этот недавний вопрос / ответ, который вошел в некоторыебольше предостережений делегированных событий и как они отличаются от обычных событий, как обойти трудности путем чередования делегатов. Сделать (возможно, динамически загружаемый) элемент кликабельным с помощью JavaScript, но отдавать приоритет ссылкам, содержащимся в - Я все еще надеюсь, что делегирование событий в mootools может несколько измениться, но я просто не понимаю, как это поможеттвой случай.

2 голосов
/ 25 октября 2011

Я пытался предотвратить запуск события делегированного клика на div.parent.Это можно сделать в моей конкретной ситуации, добавив проверку цели события в событии div.parent: 

$$('.ajax-content').addEvent('click:relay(.event-link)', function(event){
  console.log("hi");
  event.preventDefault();
  //do stuff
});

$$('.ajax-content').addEvent('click:relay(.parent)', function(event) {
  if (event.target.match('a')) return false;
  console.log("parent");
});

Спасибо Димитру за то, что он указал мне правильное направление!

...