jQueryのは、私が<code><div></code>タグにクリックイベントを除外しようとしていますクリックイベント

Question

から子要素を除外：ここ

は私のhtmlです：ここ

<div class="event" style="height:150px;width:150px;border:1px solid #dddddd;padding:10px"> 
    <div class="number">10</div> 
    <div class="wrap"><a style="display:block;color:#FF0000">Event Name</a></div> 
</div> 

はjavascriptのです：

$(document).on('click', '.event', function(e) { 
     if($(e.target).not('.wrap')){ 
      console.log('Hello'); 
     } 
    }); 

しかし、何らかの理由でそれは私のために働かない。 .wrapまたは<a>要素をクリックすると、クリックイベントが発生しないようにします。ここで

も同様にjsbinさ： https://jsbin.com/ziyukuyefo/edit?html,js,output

Answer 1

は あなたのコード内の2つの問題がある - あなたの状態は常に truthyになるようnot()はjQueryオブジェクトを返します - あなたはを参照してもよいwrape.targetでアンカー要素を持っているので、あなたが先祖ツリー

セレクタに一致する要素が存在するかどうかを）（最も近いを使用して確認することができ、そのないwrap素子自体

$(document).on('click', '.event', function(e) { 
 
    if (!$(e.target).closest('.wrap').length) { 
 
    snippet.log('clicked'); 
 
    } 
 
});

.wrap { 
 
    background-color: lightgrey; 
 
} 
 
.wrap a { 
 
    border: 1px solid red; 
 
}

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --> 
 
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="event" style="height:150px;width:150px;border:1px solid #dddddd;padding:10px"> 
 
    <div class="number">10</div> 
 
    <div class="wrap"><a style="display:block;color:#FF0000">Event Name</a> 
 
    </div> 
 
</div>

---

別のオプションは、