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＆lt;，您还需要检测.attachEvent()。

超链接节点的所有子元素是否也链接？

2 个答案: