Question

我有内部和外部元素，每个元素都有onclick()函数，当我点击内部元素时，onclick()函数都会启动。我在SO上找到了一些关于此问题的例子，但我无法让它发挥作用。这就是我试过的：

<div onclick='outerFunction("+someVar+", this);'>
 <label onclick='innerFunction("+someVar+", this);'>
 </label>
</div>

的javascript

function getSnippet(someVar, e){
    if (!e) var e = window.event;
    e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();
    // rest of code
}

function editSnippet(someVar, e){
    if (!e) var e = window.event;
    e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();
    // rest of code

}

我应该提一下，<div>和<label>是使用javascript创建的

Answer 1

根据您的问题的外观，您将this传递给e（这是被点击的当前对象）。您应该为元素添加如下类：

，而不是使用onclick来绑定click事件

<div class="outer">
    <label class="inner">
    </label>
</div>

然后你可以在文档就绪函数中使用jQuery绑定click事件：

$('.inner').on('click', function(e) {
  e.stopPropagation();
});

修改

刚刚注意到你关于将变量传递给函数的注释 - 使用jQuery and data attributes这很容易 - 所以对于html，你可以将额外的变量放入数据属性中，如下所示：

<div class="outer" data-test="variable value here" data-another="another attribute here">

然后在你的点击功能中你可以得到这样的值：

$('.outer').on('click', function(e) { e.stopPropagation(); var testVariable = $(this).data("test"); var anotherVariable = $(this).data("another") });

Answer 2

你应该在加载dom时使用这些方法，即当动态生成的元素完全加载时。

<强> Working Demo

$('body').on('click', 'a', function(e){
e.preventDefault();
$('<div class="outer"><label class="inner"></label></div>').appendTo('body');
$(this).remove();
});

$('body').on('click', '.outer > *', function(e){
 e.stopPropagation();    
});

$('body').on('click', '.outer', function(){
 alert("outside the box?");    
})

e.stopPropagation（）不起作用

2 个答案: