Связаны ли все дочерние элементы узла гиперссылки?

Question

В принципе, у меня есть большой элемент гиперссылки с фоновым изображением. Когда пользователь нависает над ним, я выставляю кнопку редактирования для их нажатия, которая выдает форму ввода для их редактирования некоторых вещей о гиперссылке.

Например, сделайте фотоальбомы. Я показываю все фотоальбомы пользователя с их обложкой и их именем. После щелчка на фотоальбоме пользователь переместится на другую страницу со всем содержимым этого альбома. Однако, когда они навешиваются над фотографией, это открывает кнопку редактирования над нижним правом углу альбома. Когда они нажимают эту кнопку, она предоставляет форму редактирования для редактирования названия альбома.

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

Как это решить? Все ли дочерние узлы гиперссылки также гиперссылки? И если да, то как я могу отключить механизм гиперссылки только для одной кнопки редактирования?

Answer 1

См. Документацию по адресу https://developer.mozilla.org/en-US/docs/DOM/event.stopPropagation и http://api.jquery.com/event.stopPropagation/.

$(elementThatOpensTheEditBox).click(function(e){ 
    e.preventDefault(); 
    e.stopPropagation(); 

    // whatever code here to open the edit box 
}); 

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

$('body').on('click', elementThatOpensTheEditBox, function(e){ 
    e.preventDefault(); 
    e.stopPropagation(); 

    // whatever code here to open the edit box 
}); 

Answer 2

JQuery делегация с использованием событий ($.on()):

<a href="http://www.yahoo.com/" id="outer"> 
    <p>Click in the blue to follow the link</p> 
    <p id="inner">I am inner to the link</p> 
</a> 

var $outer = $('#outer'); 

$outer.on('click', '#inner', function prevent(e){ 
    console.log('Inner clicked.'); 
    e.preventDefault(); 
}); 

http://jsfiddle.net/userdude/fYPnu/2

И простой Javascript:

var inner = document.getElementById('inner'); 

inner.addEventListener('click', function prevent(e){ 
    console.log('Inner clicked.'); 
    e.preventDefault(); 
}); 

http://jsfiddle.net/userdude/fYPnu/1

Обратите внимание, для обеспечения обратной совместимости с IE8 <, вам нужно будет обнаруживать .attachEvent(), а также.