Как остановить реверсивное распространение ссылки с помощью JQuery

Question

Как остановить вызовы родительских связей?

Пример:

<div id="test"> 
    <a href="#" id="link" onclick="alert('testing')">TEST</a> 
</div> 

$('#test').on('click',function(){ 
    alert('I dont want it to fire it up!');   
}) 

Я просто хочу, чтобы огонь OnClick в #Link, а не событие на #test, если я нажму на #Link

спасибо за ваши ответы

Answer 1

использование stopPropagation

event.stopPropagation(); 

Answer 2

stopPropagation() предотвращает распространение события. Однако вы должны передать событие в обработчик событий, чтобы сделать это.

$('#test').on('click',function(e){ 
    e.stopPropagation(); 
}) 

Answer 3

Выполнение return false в обработчике событий предотвратит распространение. К сожалению, это также предотвратит поведение ссылки по умолчанию; например в вашем случае загрузка <page url here>#:

<a href="#" id="link" onclick="alert('testing'); return false;">TEST</a> 

Edit

Объект jQuery.event содержит интересное свойство под названием target, который, в случае ым случае, будет содержать элемент, который получил фактический щелчок. Вы можете использовать его, если это имеет смысл:

$('#test').on('click', function(e) { 
    if ($(e.target).is("#link")) { 
     alert('#link was clicked; comment out this alert to ignore it'); 
    } 
    else { 
     alert('you clicked me but you did not click #link'); 
    } 
}); 

fiddle

Кстати, мне интересно, если есть основания для смешивания инлайн и unobstructive обработчиков событий?

Answer 4

stopPropagation() - действительная функция javascript как внутри, так и вне jQuery. jQuery помогает поддерживать IE, но вы также можете просто использовать cancelBubble для поддержки IE.

document.getElementById('link').onclick = function(e) { 
    if (e && e.stopPropagation) e.stopPropagation(); else window.event.cancelBubble = true; 
}