Вот проблема HTML:

<ul id="update-list">
<li class="update" onclick="window.location('some_url')">
  <h2> some header </h2>
  <p> some paragraph </p>
  <div>
    <a class="popup-link">
      <span> Show Popup </span>
      <span> + </span>
    </a>
  </div>
</li> 
// this repeats n times
//...
</ul>

Когда я нажимаю на ссылку .popup-link, она должна открывать только всплывающее окно лайтбокса (что делает), но также включается встроенный щелчок на li. Дело в том, что все теги li являются частью некоторой части, которая извлекается через ajax на разных страницах. Поэтому я использую jquery delegate для привязки событий следующим образом:

$('#update-list').delegate('.popup-link', 'click', function(e){
    // e.target is <span> while e.currentTarget is .popup-link 
    e.stopPropagation();
    //console.log(e.isPropagationStopped());  this shows 'true' in console
    $.popup();   // launch popup
    e.preventDefault(); // or return false
});

Это, похоже, не работает, и встроенный onclick срабатывает в любом случае. Я тоже пробовал с live(), но безуспешно. Есть что-то, чего я здесь не хватает?

5
fenderplayer 18 Авг 2010 в 09:40

4 ответа

Лучший ответ

AFAIK. Вы не можете надежно предотвратить запуск встроенного обработчика событий , прекратив всплывание внутри подключенного обработчика событий .

Кроме того, используя live() или .delegate(), вы не можете использовать ни preventDefault(), ни stopPropagation(). Вам нужно вернуть false , чтобы предотвратить фазу пузыря и поведение по умолчанию.

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

Так что, либо создайте его полностью unobtrusive (что я настоятельно рекомендую), либо удалите этот встроенный обработчик кликов в коде.

Пример:

$('#update-list').delegate('.popup-link', 'click', function(e){       
   $.popup();   // launch popup
   return false;
}).delegate('.update', 'click', function(){
   window.location('some_url');
})
// the rest of this is unnecessary if you can just omit the onclick attribute 
.find('.update')
  .removeAttr('onclick'); 

Ссылка: .delegate ()

4
Shog9 18 Авг 2010 в 06:17

Вы можете попробовать это, поскольку .delegate() был заменен методом .on().

Это будет работать нормально

0
Stephan 18 Окт 2012 в 08:03

Вы можете это попробовать?

$('#update-list').delegate('.popup-link', 'click', function(e){
    // e.target is <span> while e.currentTarget is .popup-link 
    e.stopPropagation();
    e.preventDefault(); // or return false

     // open popup in a timeout so that this function can return false
    window.setTimeout(function() {$.popup();}, 20);

    // for IE
    e.cancelBubble = true;
    return false;
});
0
naikus 18 Авг 2010 в 05:55
 $('#update-list').delegate('.popup-link', 'click', function(e){       
  e.stopImmediatePropagation();
  e.preventDefault();
  // do something...
});
0
M. Salah 3 Янв 2016 в 15:21