1

我知道现场电话会通过文档冒泡，这就是我遇到问题的原因。

不幸的是，我正在使用将事件处理程序绑定到元素的第三方库，并希望创建一个点击事件不会冒泡到这些元素的案例。

将 .click() 与 eventStopPropagation() 结合使用效果很好，但是由于内容的动态特性，我需要使用 live、on、delegate 等......这是我的问题的一个小问题。单击“内部” div 时，我需要防止触发“中间”单击。我无法更改“中间”处理程序（最好是您认为我什至无权访问它）。

在此先感谢您的帮助！！抱歉重复了，我认为这样会更整洁。

http://jsfiddle.net/99zQM/9/

HTML：

<div id="outer">
    outer non dynamic element
    <div id="middle">
        middle dynamic
        <div id="inner">
            inner dynamic
        </div>
    </div>
</div>

Javascript：

$("#middle").bind('click',function(e){
    //is rebound when content is loaded
   alert("middle clicked"); 
});
$('#inner').live('click',function(e){
    alert("inner clicked"); 
});
4

3 回答 3

1

您将.on用于绑定点击事件。对于与#outer、#middle 和#inner 的每个绑定。使用 stopPropagation 来防止冒泡事件。

$("#outer").on('click', function(e){
    e.stopPropagation();
    alert("outer clicked"); 
});

$("#outer").on('click', '#middle', function(e){
    e.stopPropagation();
    alert("middle clicked"); 
});

$("#outer #middle").on('click', '#inner', function(e){
    e.stopPropagation();
    alert("inner clicked"); 
});

jsFiddle 示例：http: //jsfiddle.net/99zQM/11/

于 2013-03-05T10:08:07.140 回答
1

使用此代码

$(document).bind('click',function(e) {
    if (e.target)
        target = e.target;
    else if (e.srcElement)
        target = e.srcElement;
    else
        target = e.currentTarget;

    if (target.id == 'middle') 
    {
    alert("middle clicked"); 
    }

       else if (target.id == 'inner')
       {
       alert("inner clicked"); 
       }
});

http://jsfiddle.net/99zQM/12/

于 2013-03-05T10:13:01.063 回答
0

您可以尝试捕获单击处理程序并将其动态包装在另一个处理程序中，该处理程序测试事件冒泡，如下所示：

// Your code does not change

    $("#middle").bind('click',function(e){
        //is rebound when content is loaded
       alert("middle clicked"); 
    });

    $('#inner').live('click',function(e){
        alert("inner clicked"); 
    });

// capture the click handler on #middle and wrap it inside a test for bubbling
var handler = $._data($("#middle")[0], "events")["click"][0].handler;
$('#middle').unbind('click');

$("#middle").bind('click',(function(handlerVar){return function(e){
    if(e.target===this) // test for bubbling
    {
        handlerVar(e);
    }
}})(handler));

见：http: //jsfiddle.net/99zQM/13/

希望这会有所帮助

于 2013-03-05T10:54:28.787 回答