2013-07-12 2 views
0

У меня проблема со вторым обработчиком событий. Это немного сложно, потому что я загружаю свой скрипт на другую страницу (я не могу изменить эту страницу), и этот скрипт реагирует на событие click. Например, когда я нажимаю на эту страницу клиента любой абзац, мой сценарий показывает мне предупреждение «cliked». И это работает, если у этого клиента нет собственного обработчика кликов. Когда моя функция клика никогда не запускается.Дополнительный обработчик событий

На данный момент сценарий очень прост:

jQuery('body').click(function(event){ 
    alert('clicked'); 
}); 

Любой намек? Извините за мой английский.

+2

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

+0

элемент также определенно готов при применении прослушивателя событий? – iConnor

ответ

2

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

Поскольку вы регистрируете обработчик события в элементе body, он будет запущен только в том случае, если срабатывание в определенном элементе распространяется до элемента body.

Грязным возможным решением является добавление обработчика ко всем элементам страницы, но это не будет работать для элементов, которые добавляются динамически.

jQuery('body *').click(function(event){ 
    alert('clicked'); 
}); 

Demo: Problem (нажав на T1 не срабатывает событие щелчка)
Demo: Solution

+0

Спасибо, ваш метод в сочетании с T.J. Crowder works :) –

+0

@ PiotrWójcik: Остерегайтесь того, что вы нажимаете 'click' на ** много ** элементов. :-) –

+0

@TJCrowder, почему я сказал грязное решение (добавление обработчика к каждому элементу в документе –

0

Для барботирования события как click, обработчики на элементах получить первый шанс на мероприятии, и только тогда он пузырится через дерево DOM докам, таким как body. Обработчики на элементах могут отменить, который пузырится по event.stopPropagation(). Как правило, они будут, если они обрабатывают событие.

Вы не можете получить событие впереди обработчиков, страница прикрепляется сама по себе, по крайней мере, не в прямом направлении, потому что, даже если вы привязали своих обработчиков к фактическим элементам, они выполняются в том порядке, в котором они выполняются «Прикреплено, и поэтому ваши будут после других. Это нормально, если они не используют event.stopImmediatePropagation(), что останавливает даже другие обработчики, прикрепленные к тому же самому элементу.

Пример помогает: Давайте посмотрим на этот HTML:

<body> 
    <div id="target">........</div> 
</body> 

и эти обработчики привязывайся в следующем порядке:

$("#target").click(function() { 
    console.log("First direct handler"); 
}); 
$("#target").click(function() { 
    console.log("Second direct handler"); 
}); 
$(document.body).click(function() { 
    console.log("'body' handler"); 
}); 

Если я нажимаю на div, мы получим это в Консоль: Live Example | Live Source

First direct handler 
Second direct handler 
'body' handler

Теперь давайте изменим первый обработчик и оставить остальное то же самое:

$("#target").click(function(e) { 
    console.log("First direct handler"); 
    e.stopPropagation(); 
}); 

Теперь щелчок дает нам это: Live Example | Live Source

First direct handler 
Second direct handler

Обработчик на body не был вызван, потому что первый проводник прекратил распространение.

Давайте изменим, что первый обработчик снова:

$("#target").click(function(e) { 
    console.log("First direct handler"); 
    e.stopImmediatePropagation(); 
}); 

Теперь щелчок дает нам следующее: Live Example | Live Source

First direct handler

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

+0

Спасибо, для получения пояснения :) –

Смежные вопросы