Question

我有以下HTML：

＆＃13;

<div class="col-lg-3 col-xs-6 individual " style="display: block;">
  <button style="position:relative; z-index:4; padding:8px 7px 8px 30px; font-size:16px; font-family: Calibri,Arial,Tahoma; color:black;" class="excel-button">Bajar Tabla</button>
  <!-- small box-->
  <div data-name="cardColor" class="small-box bg-purple">
    <div class="inner">
      <h4 data-name="title">Semana 9</h4>
      <p data-name="dateRange">26-febrero al 02-marzo</p>
    </div>
    <div class="icon"><i data-name="week" class="fa">9</i></div>
    <a class="small-box-footer" data-name="commentFooter">Sin enviar a revisión&nbsp;&nbsp;<i class="text-warning fa fa-exclamation-triangle"></i></a>
  </div>
  <div class="comment-box text-left" style="display: none;">
    <div data-name="comment" class="comment-inner text-danger" style="margin-right:15px">Este reporte no ha sido enviado a revisión</div>
  </div>
</div>

＆＃13;

外部div是一个可点击的div，我也试图让内部按钮也可以点击。但是当我点击按钮时，它会触发div的动作而不是按钮的动作。如何在用户单击按钮时忽略div元素？

Answer 1

这称为事件冒泡。当元素上发生事件时，处理程序将在初始元素上运行，然后它将冒泡到具有相同事件的父元素。大多数事件都在冒泡，除了一些事件，例如focus。因此，您的初始按钮单击处理程序将触发，然后您的div单击将触发。

要停止传播，请在事件对象上调用stopPropagation()。

冒泡是事件在DOM树中向上传播的地方，捕获是事件传播的地方。

See here for more information.

Answer 2

你走了。尝试点击div和button

$(function(){
  $('div').click(function(event){
    alert('clicked on div');
  });
  
  $('button').click(function(event){
    event.stopImmediatePropagation(); //This ensures that div's onclick event is not fired
    alert('clicked on button');
  });
});

div{
  padding: 20px;
  background: #f4f4f4;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <button>Button</button>
</div>

单击div中的嵌套按钮

2 个答案: