javascript - 無効な要素のイベント バブリングを停止する

Question

スタイルのあるボタンがあります

pointer-events: none;

このボタンには、折りたたみ可能なイベントを実行する親要素があります。このボタンが親要素の折りたたみイベントをトリガーしないようにする方法がわかりません。これは、pointer-events: none であるボタン スタイルが原因で発生します。

ありがとう

Answer 1

次のhtmlを想定しています。

<div class="collapsible">
    <button>Hi</button>
</div>

次のようなことができます。

$('.collapsible').click(function(e) {
    if ($(this).children('button').css('pointer-events') == 'none') return;

    //do collapse
});

または多分これ：

$('.collapsible').click(function(e) {        
    //do collapse
});

$('.collapsible button').click(function(e) {
   if ($(this).css('pointer-events') == 'none')
       e.stopPropagation();
});

Answer 2

@adeneoが言ったようpointer-events: noneに、子で使用すると、親のイベントリスナーは、ターゲットがそれ自体であるか、その子であるかを知ることができません。段落内のテキストをクリックすると、イベント リスナーは、テキストまたは段落のパディングをクリックしたかどうかを認識できません。

次に、使用できます

document.getElementById('outer').onclick = function(e) {
    /* your code */
};
document.getElementById('outer').addEventListener('click',  function(e) {
    if(e.target !== this) {
        e.stopPropagation();
    }
}, true);

なしpointer-events: none。

このように、キャプチャ フェーズを使用すると、子のイベント ハンドラー ( などpointer-events: none) の実行を防ぐことができますが、ユーザーが要素をクリックしたのか、その子をクリックしたのかを区別できるようになりました。

デモjsFiddle

問題: 古いバージョンの IE ではキャプチャ フェーズを使用できません。

メリット：古いIEでは動かないので、こんなこと気にしなくていい

• e = e || window.event
• e.target || e.srcElement
• if (e.stopPropagation) { e.stopPropagation(); } else { e.calcelBubble=true; }