バックグラウンドでボタンをクリックするのを止めるにはどうすればいいですか？

Question

私はクリック可能なDIVを持っており、このDIVの中にボタンを入れようとしています。ボタンをクリックすると、DIV自体がクリックされたときとは異なるイベントが発生します。

現在、ボタンをクリックすると、ボタンと同様にDIVがトリガーされます。ボタンがクリックされたときにDIVがトリガーされるのを止める方法はありますか？

<div class="stack"> 
<div class="background" onclick="alert('background clicked');"> 
    <button onclick="alert('bg-button clicked');" style="left:65px; top:65px; position: absolute;">This is a background button</button> 
    <div class="card"> 
     <button onclick="alert('card-button clicked');">This is a card button</button> 
    </div> 
</div> 

DEMO： https://jsfiddle.net/b3cf91zo/

Answer 1

あなたが使用して伝播を停止することができます。

event.stopPropagation(); 

あなたがこの記事を見ている必要がありますHow to stop onclick event in div from propagating to the document?

Answer 2

使用のstopPropagation。

この場合

<div class="stack"> 
     <div class="background" onclick="alert('background clicked');"> 
      <button onclick="alert('bg-button clicked');" style="left:65px; top:65px; position: absolute;">This is a background button</button> 
      <div class="card"> 
       <button id="clickButton">This is a card button</button> 
      </div> 
     </div> 
    </div> 

$("#clickButton").click(function(e) { 
    e.stopPropagation(); 
    alert('card-button clicked') 
}); 

https://jsfiddle.net/mc19ynhw/

Answer 3

<div class="stack"> 
    <div class="background" onclick="alert('background clicked');"> 
     <button onclick="alert('bg-button clicked');" style="left:65px; top:65px; position: absolute;">This is a background button</button> 
     <div class="card"> 
      <button onclick="alert('card-button clicked');event.stopPropagation();">This is a card button</button> 
     </div> 
    </div> 
</div> 

ボタンにevent.stopPropagation()を追加クリック。

Answer 4

ここでコードを修正しました。以下でそれを見つけてください。

**

<script> 
function ButtonClick(thisElement){ 
if(thisElement=="BUTTON"){ 
alert("Button Clicked"); 
} 
} 
function DivClicked(thisElement){ 
if(thisElement=="DIV"){ 
alert("div Clicked"); 
} 
} 
</script> 
<div class="stack"> 
    <div class="background" id="back" onclick="DivClicked(event.target.nodeName)"> 
     <button onclick="alert('bg-button clicked');" style="left:65px; top:65px; position: absolute;">This is a background button</button> 
     <div class="card"> 
      <button id="btn1" onclick=" ButtonClick(event.target.nodeName)">This is a card button</button> 
     </div> 
    </div> 
</div> 

**