如何在子元素的鼠标按下事件被触发时停止父元素的点击事件。

Question

如标题所述，我想在子元素的mousedown事件触发时停止父元素的click事件。

我的HTML代码如下：

<div class='parent'> 
       <div class='child'></div>
</div>

我的jQuery代码如下：

 $('.child').mousedown(function(){
   //what can I write here to prevent parent's click event from fireing?
   //I've tried event.stopPropagation() as well as
   //event.stopImmediatePropagation() already 
   });

 $('.parent').on('click',function(){...})

- Lin Shen

---

你尝试过在子元素的 click 处理程序中使用 event.stopPropagation() 吗？ - nnnnnn

是的，我已经尝试过 $('.child'').on('click',function(event){ event.stopPropagation()console.log('child click');});。有趣的是：.child 的点击事件并不总是触发，而 .child 的 mousedown 事件和 .parent 的点击事件则像往常一样工作。 - Lin Shen

Answer 1

鼠标事件可以通过以下方式触发：

1. MouseDown（鼠标按下）

2. Click（单击）

3. MouseUp（鼠标松开）

在 mousedown 处理程序中使用 event.stopPropagation() 只会影响 mousedown 事件。您可以尝试以下解决方法：

var mdFaired = false;

$('.parent').click(function(e) {
  if(!mdFaired) {
      var counter = $(this).children('.counter');
      var count = parseInt(counter.text());
      counter.text(++count);
  }
  else {
    mdFaired = false;
  }
});

$('.child').mousedown(function(e) {
  e.stopPropagation();
  mdFaired = true;
  
  var counter = $(this).children('.counter');
  var count = parseInt(counter.text());
  counter.text(++count);
});

div {
  border: 1px solid black;
  padding: 5px;
}

.parent {
  width: 300px;
  height: 300px;
}

.child {
  width: 50%;
  height: 50%;
  margin: 50px auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='parent'>
  <span class="counter">0</span>
  <div class='child'>
    <span class="counter">0</span>
  </div>
</div>

- Sergey Gornostaev

Answer 2

e.stopPropagation();
e.preventDefault();

e是从函数调用传递的事件。

这个应该可以解决问题。

- Hardik Vaghani