javascript - 使内层div的点击不调用外层的onClick函数

Question

可能重复：
防止在单击超链接时触发父容器单击事件

我有

<div onClick="someJScode();">
  ...
  <div></div>
  ...
</div>

我不想someJScode()在单击内部 div 时被调用。这该怎么做？

Answer 1

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

这将阻止点击事件冒泡 DOM。
http://api.jquery.com/event.stopPropagation/
https://developer.mozilla.org/en/docs/DOM/event.stopPropagation

Answer 2

你可以试试这个：

HTML

<div onClick="someJScode();" class="parent">
  <div class="child" onclick="childCallback(event)"></div>
</div>

JavaScript

function someJScode() {
    alert('Click!');
}

function childCallback(event) {
    event.stopImmediatePropagation();
    return false;
}

演示

上面的代码使用了 stopImmediatePropagation也可以使用stopPropagation

这是更通用的解决方案：

var preventChildrenPropagation = (function (parentClass) {
    var preventPropagation = function (event) {
        event.stopPropagation();
        return false;
    }
    return function (parent) {
        var foreach = Array.prototype.forEach;
        foreach.call(document.getElementsByClassName(parent), function (e) {
            foreach.call(e.children, function (c) {
                c.onclick = preventPropagation;
            });
        });
    }
}());

preventChildrenPropagation('parent');

该方法将阻止“父”元素的所有子元素preventChildrenPropagation的所有事件的传播。click