javascript - 如果我单击子 div，父 div 单击功能不会运行

Question

嗨，我的代码中遇到一个问题

$(document).ready(function() {

  $(document).on('click', '.rohit', function() {
    alert('rohit');
  })

  $(document).on('click', '.azad', function() {
    alert('azad');
  })

});

.rohit {
  width: 200px;
  height: 100px;
  background: green;
}

.azad {
  width: 100px;
  height: 50px;
  background: gray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="rohit">
  hello
  <div class="azad">
    hello azad
  </div>
</div>

如果我点击 azad div 比 rohit div 也会触发警报如何停止此操作

我习惯了 Angular JS 的这种严肃性

Answer 1

您可以使用stopPropagation避免触发父元素的监听器:

$(document).ready(function(){
      
      $(document).on('click','.rohit', function(){
          alert('rohit');
      })
      
      $(document).on('click', '.azad',function(e){
          e.stopPropagation();
          alert('azad');
      })
      
});

.rohit{width:200px;height:100px;background:green;}

.azad{width:100px;height:50px; background:gray;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="rohit">
    hello <div  class="azad">
    hello azad
    </div>
</div>