基本上,我有一个很大的超链接元素,带有背景图像。当用户将鼠标悬停在上面时,我为他们显示了一个编辑按钮,以供单击以弹出一个输入表单,供他们编辑有关超链接的内容。
例如,拍摄相册。我将显示用户的所有相册及其封面照片和姓名。单击相册后,用户将重新定位到包含该相册所有内容的另一页。但是,当他们将鼠标悬停在照片上时,这会在相册的右下角上方显示一个编辑按钮。当他们单击此按钮时,将显示一个编辑表单,供他们编辑相册的标题。
但是,当他们单击公开的编辑按钮时,这也会激活该链接,并且将它们转移到该相册的内容中。它的确显示了编辑表单,但这并不重要,因为页面会自动将其转移到其他视图。
我该如何解决?超级链接节点的所有子节点也都超级链接吗?如果是这样,我如何仅对那个编辑按钮禁用超链接机制?
最佳答案
请参阅有关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
绑定click事件:$('body').on('click', elementThatOpensTheEditBox, function(e){
e.preventDefault();
e.stopPropagation();
// whatever code here to open the edit box
});