Предотвращение запуска событий jquery из подэлементов - PullRequest
Новая
       1

Предотвращение запуска событий jquery из подэлементов

0 голосов
/ 12 июля 2011

У меня есть следующий код: 

<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.6.2.min.js" 
    type="text/javascript">
    </script>
  </head>
  <body>
    <div id="a">
      <div id="b">
        <script type="text/javascript">
              $('#b').bind('fuffle',function() {alert('b fuffled');})
        </script>
        <div id="c"></div>
      </div>
    </div>
  </body>
</html>

Когда я бегу 

$("#b").trigger('fuffle')

Я получаю окно с предупреждением, как и ожидалось. Тем не менее, когда я бегу 

$("#c").trigger('fuffle')

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

В моем коде подэлементы также могут вызывать fuffle, но они связаны с другим методом. Такое поведение буквально вызывает ошибку JS stackoverflow.

Ответы [ 3 ]

3 голосов
/ 12 июля 2011

Попробуйте передать событие в вашу анонимную функцию-обработчик, например 

...'fuffle', function(e) {alert...

, затем позвоните 

e.stopPropagation()

, что предотвратит всплытие события. Более грубый подход - вернуть false.

http://api.jquery.com/event.stopPropagation/

2 голосов
/ 12 июля 2011

JavaScript события всплывают в DOM. Вы можете либо:

  • Проверьте event.target, чтобы увидеть, произошло ли событие из #c или одного из его дочерних элементов, в обработчике события, связанном с #c или
  • Свяжите обработчик события с #b, чтобы не давало событию распространяться вверх по дереву DOM.
1 голос
/ 12 июля 2011

возможно, есть простая проверка 

$('#b').bind('fuffle',function(){
    if($(this).attr("id") == "b"){
        alert('b fuffled');
    }
});
...