如何在元素中处理鼠标事件，但不能在其子元素上处理

How do I handle a mouse event within an element, but not on one of its children?

本文关键字：处理 元素 但不能 鼠标 事件      更新时间：2023-09-26

我想在父元素上以一种方式处理mousedown事件，但如果事件发生在该父元素的子元素上，则以不同的方式处理。

此：

$('.parent').on('mousedown', function(){
  //stuff
});

如果单击.parent中的任何元素，就会触发该函数，但我只想在父元素是唯一被单击的元素，而不是它的子元素时触发该函数我该怎么做

将处理程序绑定到子元素，并在子处理程序中使用event.stopPropagation()。这样事件就不会突然出现在家长面前。

只需检查事件目标是否与jQuery的this引用相同：

$('.parent').on('mousedown', function(e){
  var child = $('.child-selector');
  if(e.target === this)
      // Run parent code
  if(e.target === child[0])
      // Run child code
});

这是jQuery文档中提出的缓解事件冒泡问题的建议。这也不需要为每个子元素添加一个带有stopPropagation()的处理程序，如果有很多子元素，这将特别乏味。

您可以在事件中添加IF检查来验证事件的位置。类似于：

$('.parent').on('mousedown', function(e) { 
   if( e.target !== this ) 
       return;
    //...do your stuff stuff.. 
});

本质上是说，如果e.target与target不相同，那么您单击了父对象旁边的某个内容。。。

相关文章：