Как предотвратить множественные вызовы пользовательского обработчика событий при использовании шаблона Observer в jQuery - PullRequest
Новая
       20

Как предотвратить множественные вызовы пользовательского обработчика событий при использовании шаблона Observer в jQuery

2 голосов
/ 30 июня 2011

Я использую jQuery для реализации шаблона наблюдателя. Я запускаю пользовательское событие для $ ('body *'), потому что не известно, какие элементы будут реагировать на это событие. То есть я хочу, чтобы мои коллеги-разработчики добавили код для ответа на событие, и мне не нужно было об этом знать. Проблема, с которой я сталкиваюсь, заключается в том, что любые дочерние элементы элемента, связанного с пользовательским событием, выполняют обработчик. Есть ли способ убедиться, что эти дочерние элементы не выполняют обработчик? Имейте в виду, что я не могу вызвать сам элемент, потому что этот элемент неизвестен. Я бы хотел, чтобы целевые элементы не добавляли класс, если это возможно.

Вот пример кода: 

<html>
  <head>
    <title>test</title>
    <script src="http://code.jquery.com/jquery-1.4.4.js"></script>
    <script>
      $(function() {
        $('#clickMe').click(function() {
          $('body *').trigger('myCustomEvent');
        });

        $('#someDiv').bind('myCustomEvent', function(e) {
          alert('someDiv responding to myCustomEvent');
        });

        $('#someOtherDivAddedBySomeOtherGuyLaterOn').bind('myCustomEvent', function() {
          alert('someOtherDivAddedBySomeOtherGuyLaterOn responding to myCustomEvent');
        });
      });
    </script>
  </head>
  <body>
    <div id="someDiv">
      <span>a span</span>
      <span>another span</span>
    </div>
    <div id="someOtherDivAddedBySomeOtherGuyLaterOn">
      <span>a span</span>
      <span>another span</span>
    </div>
    <p><button type="button" id="clickMe">Click Me</button></p>
  </body>
</html>

1 Ответ

0 голосов
/ 30 июня 2011

Я не знаю, существует ли автоматический способ предотвращения всплытия событий на дочерних элементах, но вы можете вручную остановить всплытие на известных дочерних элементах. Например: 

$('#someDiv span').bind('myCustomEvent', function(e) {
  e.stopPropagation();
});

ОБНОВЛЕНИЕ: Вот пример рабочего кода. 

<!DOCTYPE HTML>
<html>
<head>
<title>Test</title>
<script src="js/jquery-1.6.1.min.js"></script> 
<script>
    $(function() {
        $('#clickMe').click(function() {
          $('body *').trigger('myCustomEvent');
        });

        $('#someDiv').bind('myCustomEvent', function(e) {
          console.log('someDiv responding to myCustomEvent');
        });

        $('#someDiv span, #someOtherDivAddedBySomeOtherGuyLaterOn span').bind('myCustomEvent', function(e) {
          e.stopPropagation();
        });

        $('#someOtherDivAddedBySomeOtherGuyLaterOn').bind('myCustomEvent', function() {
          console.log('someOtherDivAddedBySomeOtherGuyLaterOn responding to myCustomEvent');
        });
    });
</script>
</head>
<body>
    <div id="someDiv">
      <span>a span</span>
      <span id="another">another span</span>
    </div>
    <div id="someOtherDivAddedBySomeOtherGuyLaterOn">
      <span>a span</span>
      <span>another span</span>
    </div>
    <p><button type="button" id="clickMe">Click Me</button></p>
</body>
</html>
...