javascript - 内側の div をクリックして、外側の 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