Question

我有一个div包含一些内容，其中有一些链接。 div本身会监视click事件，因此可以使内容可编辑。但是，我希望用户能够点击div内的链接并让它导航到链接的页面而不是编辑内容（点击div中的其他任何位置都可以编辑内容）。我如何实现这一目标？

代码示例：

<div id="content">
    Here's a <a href="http://google.com">link</a>.
</div>

// jQuery Javascript:
$("#content").click(function() {
    // Make content editable
});

（点击链接不应该使内容可以编辑，而应该将页面指向google.com。）

编辑：我正在使用我自己的代码来编辑内容（用文本区域切换div，就像那样）。

Answer 1

检查事件目标并返回true

$("#content").click(function(e) {
    if ($(e.target).is('a')) {
        return true;
    }
});

未经过测试

这背后的想法是从处理程序中提前纾困，并且通过返回true，允许浏览器以通常的方式处理事件。

Answer 2

您遇到的一个错误是您在HTML中使用content作为类，但在jQuery中使用了ID。因此，您应该将HTML更改为id="content"（假设您网页上没有其他元素已经拥有该ID。

您的Javascript看起来像：

$("#content").click(function(){
    this.setAttribute('contenteditable', 'true');
    $(this).focus();
}).blur(function(){
    this.setAttribute('contenteditable', 'false'); 
});

$("#content a").click(function(e){
    e.stopPropagation();
});

这是一个JSFiddle：http://jsfiddle.net/q77Bs/

Answer 3

example

使用event.stopPropagation()

// jQuery Javascript:
$(".content").click(function(e) {
    // make content editable
});

$('.content a').click(function(e) {
    e.stopPropagation();
});

Answer 4

您可以将链接的z-index更改为大于div的z-index（不确定是否可以），或者您可以将每个链接放在另一个具有比主div更高的zindex的div中。这样可以防止点击在主div上注册，因此请确保辅助div的大小正确，以免妨碍编辑功能

Answer 5

$('#content a ').live("click", function(event){
   event.stopPropagation();
});

这将解决问题

允许单击通过绑定到“单击”事件的div的链接

5 个答案: