子供ではなく親DIVでのみクリックイベントを発生させる方法は?


211

クラス化されたDIVと、foobarそのDIV内にクラス化されていないいくつかのDIVがありますが、それらはfoobarクラスを継承していると思います。

$('.foobar').on('click', function() { /*...do stuff...*/ });

DIVのどこかをクリックしたときにのみ、その子DIVでクリックしないと発砲したいと思います。

回答:


439

e.targetがと同じ要素の場合、this子孫をクリックしていません。

$('.foobar').on('click', function(e) {
  if (e.target !== this)
    return;
  
  alert( 'clicked the foobar' );
});
.foobar {
  padding: 20px; background: yellow;
}
span {
  background: blue; color: white; padding: 8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='foobar'> .foobar (alert) 
  <span>child (no alert)</span>
</div>


その答えはこのコメントを説明しています
gdoronはモニカをサポートしています

@gdoron:Adamは親切すぎる。:)

1
@vickyさん、こんにちは。参考までに、JavaScriptには2種類の値の等価比較があります。===または!==使用の「厳密な等価比較アルゴリズム」、しばらく==して!=の使用「抽象平等の比較アルゴリズム」タイプの保磁力です。一般に、強制的な型が特に必要でない限り(その規則は少し複雑であるため)、厳密な比較を使用するのが賢明です。この場合、オブジェクトが比較されているため、実際には違いはありませんが、ほとんどの人は厳密な比較を続けることに気付くでしょう。

1
@vicky:大丈夫です。それはまだ正しいです。JSにさまざまな演算子があります。;-)

3
これはVanilla JS addEventListenerでも機能し、jQuery固有ではないため、良い答えです。
Michael Giovanni Pumo

64

新しいブラウザだけをターゲットにすることを気にしない場合に機能する別の方法があります。CSSを追加するだけ

pointer-events: none;

クリックをキャプチャするdivのすべての子に。こちらがサポートテーブルです

http://caniuse.com/#feat=pointer-events


13
「感謝」のコメントを書くことは避けるべきですが、このためにキスをすることができます:-)
Simona Adriani

@simonaAdrianiハァッ?
n3wb

おかげで、私は同じ方法でやりましたが、その周りに単体テストケースを書くのに苦労しています。clickプログラマティッククリックイベントトリガーを確実にブロックする方法を教えてください。
Pankaj Parkar 2018

29

あなたはあなたの好意でバブリングを使うことができます:

$('.foobar').on('click', function(e) {
    // do your thing.
}).on('click', 'div', function(e) {
    // clicked on descendant div
    e.stopPropagation();
});

子孫<a>要素のクリックのみを除外したいので、これは私の特定のシナリオに最適なソリューションのように見えます。問題は1つだけです。それらを中央クリックしても、イベントがトリガーされます(Google Chromeでテスト済み)。これを防ぐバリアントはありますか?
cgogolin

@cgogolinは、これを見てみましょう:stackoverflow.com/questions/12197122/...
ジェシカ・

28

承認された答えは得られませんでしたが、少なくともバニラJSでは、これでうまくいくようです。

if(e.target !== e.currentTarget) return;

1
e.currentTargetが参照よりも正確であるthis物体ためthisに指しているが、それが呼び出された場所からの範囲および文脈に応じて変更することができ
eballeste

20
//bind `click` event handler to the `.foobar` element(s) to do work,
//then find the children of all the `.foobar` element(s)
//and bind a `click` event handler to them that stops the propagation of the event
$('.foobar').on('click', function () { ... }).children().on('click', function (event) {
    event.stopPropagation();
    //you can also use `return false;` which is the same as `event.preventDefault()` and `event.stopPropagation()` all in one (in a jQuery event handler)
});

これclickにより、要素の子要素のいずれかでのイベントの伝播(バブリング)が停止する.foobarため、イベントは.foobar要素に到達せず、イベントハンドラーを起動しません。

ここにデモがあります:http : //jsfiddle.net/bQQJP/


3
$(".advanced ul li").live('click',function(e){
    if(e.target != this) return;
    //code
    // this code will execute only when you click to li and not to a child
})

2

私は同じ問題を抱えており、(他の回答に基づいて)この解決策を思いつきました

 $( ".newsletter_background" ).click(function(e) {
    if (e.target == this) {
        $(".newsletter_background").hide();
    } 
});

基本的に、ターゲットがdivである場合はコードを実行し、それ以外の場合は何もしません(非表示にしないでください)。


1

私の場合も同様ですが、これはfoobar-s が少なく、1回のクリックで1つだけ閉じたい場合です。

親ケースを探す

$(".foobar-close-button-class").on("click", function () {
    $(this).parents('.foobar').fadeOut( 100 );
    // 'this' - means that you finding some parent class from '.foobar-close-button-class'
    // '.parents' -means that you finding parent class with name '.foobar'
});

子供ケースを探す

$(".foobar-close-button-class").on("click", function () {
    $(this).child('.foobar-close-button-child-class').fadeOut( 100 );
    // 'this' - means that you finding some child class from '.foobar-close-button-class'
    // '.child' -means that you finding child class with name '.foobar-close-button-child-class'
});

1

event.currentTargetを使用できます。イベントを受けた方のみクリックイベントを行います。

target = e => {
    console.log(e.currentTarget);
  };
<ul onClick={target} className="folder">
      <li>
        <p>
          <i className="fas fa-folder" />
        </p>
      </li>
    </ul>


1

使用できずpointer-events: none;、最新のブラウザーをターゲットにcomposedPathしている場合は、次のようにして、オブジェクトの直接クリックを検出できます。

element.addEventListener("click", function (ev) {
    if (ev.composedPath()[0] === this) {
        // your code here ...
    }
})

あなたがここでcomposedPathについてもっと読むことができます:https//developer.mozilla.org/en-US/docs/Web/API/Event/composedPath


0

// if its li get value 
document.getElementById('li').addEventListener("click", function(e) {
                if (e.target == this) {
                    UodateNote(e.target.id);
                }
                })
                
                
                function UodateNote(e) {

    let nt_id = document.createElement("div");
    // append container to duc.
    document.body.appendChild(nt_id);
    nt_id.id = "hi";
    // get conatiner value . 
    nt_id.innerHTML = e;
    // body...
    console.log(e);

}
li{
 cursor: pointer;
    font-weight: bold;
  font-size: 20px;
    position: relative;
    width: 380px;
    height: 80px;
    background-color: silver;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: 0.5cm;
    border: 2px solid purple;
    border-radius: 12%;}
    
    p{
     cursor: text;
  font-size: 16px;
   font-weight: normal;
    display: block;
    max-width: 370px;
    max-height: 40px;
    overflow-x: hidden;}
<li id="li"><p>hi</p></li>

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.