0

基本上，我有一个带有背景图像的大型超链接元素。当用户将鼠标悬停在它上面时，我会显示一个编辑按钮供他们单击，该按钮会弹出一个输入表单供他们编辑有关超链接的一些内容。

例如，拍摄相册。我显示所有用户的相册以及他们的封面照片和他们的名字。单击相册后，用户将重新定位到包含该相册所有内容的另一个页面。但是，当他们将鼠标悬停在照片上时，相册右下角上方会出现一个编辑按钮。当他们单击此按钮时，会显示一个编辑表单，供他们编辑专辑标题。

但是，当他们单击暴露的编辑按钮时，这也会激活链接，并将它们转移到该相册的内容中。它确实公开了编辑表单，但这并不重要，因为页面会自动将它们转移到不同的视图。

我该如何解决这个问题？超链接节点的所有子节点是否也都超链接？如果是这样，我怎么能只为那个编辑按钮禁用超链接机制？

4

2 回答 2

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
});

如果元素是动态生成的，您可以使用以下方法绑定 click 事件.on：

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

    // whatever code here to open the edit box
});
于 2013-03-12T06:32:10.607 回答
0

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

Note, for backwards compatibility with IE8<, you would need to detect for .attachEvent() as well.

于 2013-03-12T06:36:09.513 回答