子アンカータグをクリックした場合、親要素のクリックイベントを無効にする方法はありますか？

Question

データベースから動的コンテンツを作成している状況があります。ここに私は<div>という内容のコンテンツを作成しています。そして私は<div>というイベントonclickを追加しました。ユーザーが<div>のdivの内容をクリックすると、ポップアップウィンドウが開きます。しかし、コンテンツにアンカータグがある場合。ユーザーがアンカータグをクリックすると、イベントが実行され、リンクページとポップアップが開きます。

アンカータグをクリックしたときにdiv onclickが表示されないようにします。

私に手伝ってくれるものはありますか？このような

Answer 1

あなたはjQueryのを使用している場合、してみてくださいのstopPropagation（）機能：

簡単な例：

HTML：クラスとIDを持つ

$("div a").click(function(e) { 
    e.stopPropagation(); 
    // your code here... 
}); 

---

または拡張の例：

<div id="content"> 
    ... 
    <a href="/your/uri/here" class="noPropagation">my link</a> 
    ... 
</div> 

の

JS：

$("div#content a.noPropagation").click(function(e) { 
    e.stopPropagation(); 
    // your code here... 
}); 

---

こちらのドキュメントです：https://api.jquery.com/event.stoppropagation/

Answer 2

あなたが動的に<div>を追加しているので、あなたは動的なコンテンツに最も近い祖先にクリックイベントハンドラをバインドすることができます。ここで

$('.some-container').on('click', 'div.dynamic-content a', function(event) { 
    event.stopPropagation(); 
}); 

Answer 3

ご生成コンテンツサーバーサイドので例https://jsfiddle.net/7c51j7av/

<div class="outer"> 
    <div class="inner"> 
    click me 
    </div> 
</div> 



$(".outer").click(function(){ 
     alert("Here"); 
    }); 

    $(".inner").click(function(e){ 
     e.stopPropagation(); 
     alert("Stopped it"); 
    });