Как остановить фоновый щелчок по кнопке?

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> 

**