Question

我有一个jQuery点击事件，它将一个类（active）添加到dropdown。在dropdown中有一些框（通常称为box）。

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

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

Answer 2

您应将这些内容分成单独的点击事件。你也应该委托他们，因为你会因为事件冒泡而触发它们。自从我编写jQuery以来已经有一段时间了，但是我记得你应该使用.on();，因为你可以使用该方法委派。

我将离开delegation as homework for you，但是你应该如何处理这个问题：

$('.item').on('click', function(e, el) {
	var $child = $(this).children('.dropdown'),
        activeClass = 'active';

	$child.hasClass(activeClass) ? $child.removeClass(activeClass) : $child.addClass(activeClass);
});

$('.box').on('click', function(e, el) {
	console.log('box clicked');
});

JS - 停止当前函数以上的函数

2 个答案: