Question

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

此：

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

如果单击.parent中的任何元素，

将触发，但我想仅在父元素是被点击的唯一元素而不是其中一个子元素时触发该函数。 我该怎么做？

Answer 1

将处理程序绑定到子元素，并在子处理程序中使用event.stopPropagation()。然后事件不会冒泡到父母身上。

Answer 2

只需检查event target是否与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 documentation中缓解事件冒泡问题的建议。。这也不需要为每个子元素添加一个带stopPropagation()的处理程序，如果有很多子元素，这将特别繁琐。

Answer 3

您可以在活动中添加IF检查以验证活动的位置。类似的东西：

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

基本上说如果e.target与目标不同，那么你点击了父母旁边的东西......

如何处理元素中的鼠标事件，而不是处理其中一个子元素？

3 个答案: