javascript - JS - 在当前函数之上停止函数

Question

我有一个 jQuery 单击事件，它将一个类(active)添加到下拉列表。在下拉列表中有一些框(该类通常称为box)。

目前，只要您单击 item 类中的任意位置，jQuery 事件就会触发，但如果您单击 box，它也会关闭下拉列表。因此，我在 addClass 部分上方添加了一条 if 语句，用于检查您是否单击了框。

这是 html:

  <div class="trainee-item">
    <div class="dropdown">
      <div class="box"></div>
    </div>
  </div>

这是 JS:

$('.item').click(function(e) {
  $('.box').click(function() {
    console.log('stop!!!');
  });

  if ($(this).children('.dropdown').hasClass('active')) {
    $(this).children('.dropdown').removeClass('active');
    return;
  }
  $(this).children('.dropdown').addClass('active');
});

我已经尝试过 return (其中 console.log('stop!!!!'); 当前所在的位置，但这只会停止 $ ('.box').click(function() (直接“父”函数)。我正在尝试停止该函数之上的函数

有什么帮助吗？谢谢

Answer 1

一种方法是

$('.item').click(function(e){
    if (e.target.className=="box"){
         e.preventDefault()
         return
    }

})

$('.item').click(function(e) {
  
   if (e.target.className=="box"){
      e.preventDefault()
      alert("don't close it!")
      return
   }

   

  if ($(this).children('.dropdown').hasClass('active')) {
    $(this).children('.dropdown').removeClass('active');
    return;
  }
  $(this).children('.dropdown').addClass('active');
});

.dropdown{display:none;width:100px;height:100px;background:#bbb}
.active{height:120px;}
.item{height:20px;background:#ccc}
.active.dropdown{display:block}
.box{border-bottom:1px solid #999;padding:10px}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="trainee-item item">
    <div>Click me</div>
    <div class="dropdown">
      <div class="box">hi</div>
    </div>
</div>