Question

我在代码中面对一个问题

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

如果我点击azad div而不是rohit div也会触发警告如何停止此

我在角度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>

Answer 2

您可以使用事件stopPropagation()方法。此方法可防止事件传播到父项。

$(document).ready(function(){

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

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

  })
});

这是小提琴链接https://jsfiddle.net/9c54tow6/

如果我点击子div，父div点击功能不运行

2 个答案: