javascript - 父元素事件在单击子元素时触发

Question

我创建了一个复选框并将其放置在 myElement 上。这是我的代码。

var myCheckBox = document.createElement("input");
    myCheckBox.setAttribute("type", "checkbox");
    myCheckBox.innerHTML = "";
    myCheckBox.setAttribute("id", "myID");
    myCheckBox.onchange = CheckBoxChange;
    myCheckBox.setAttribute("value", title);
    myEle.insertBefore(myCheckBox, myEle.firstChild);

现在 myEle 的 onclick 发生了一些其他事件，例如排序。因此，当Check/Unckeck复选框时，Paraent元素事件也很激烈。如何克服这一点。

我在这里尝试的是

function CheckBoxChange(e){
    e.stopPropagation();
}

但是在我的触发器到达 CheckBoxChange 之前，myEle 的事件变得很激烈。我如何才能将该事件限制为 myEle 而它不会出现在 checkbox 中。感谢您的帮助。

Answer 1

当您单击复选框时，会引发 click 事件和 change 事件，这两个事件都会冒泡到容器中。

在您的代码中，您停止传播 change 事件，但不是 click 事件。我猜你的 parent myEle 有一个 click 处理程序来触发你提到的排序。

如果您将复选框更改为使用click 处理程序而不是change，那么它应该按照您想要的方式运行，如您在此处所见:http://jsfiddle.net/wqdcd41p/ . (请注意，即使您通过键盘选中/取消选中复选框，仍会触发 click 事件。)