手动触发鼠标悬停事件而不允许事件传播

Question

如何仅针对特定元素使用jQuery触发鼠标悬停事件，而不允许事件传播到父控件。

我知道如何触发事件：$('selector').trigger('mouseover');

例如我image内有tr。我有两个悬停事件处理程序。 我想手动触发仅用于图像的悬停事件。

有没有人有想法？

Answer 1

我在示例here中找到了答案。 这是解决我问题的代码：

var event = jQuery.Event('<event_name>');
event.stopPropagation();
$('<selector>').trigger(event);

Answer 2

您可以将鼠标悬停在普通事件监听器上，然后执行类似的操作。

$("selector").on('mouseover', function(event){
  event.stopPropagation();
  // do something
}); 

这将阻止事件冒泡到容器元素。 然后，您可以像往常一样调用触发器

$('selector').trigger('mouseover');

Answer 3

使用mouseenter或event.stopPropagation()喜欢

$("img").on('mouseover', function(e){
    e.stopPropagation();
    // do something
});

或

$("img").on('mouseenter', function(e){
    // do something
});

阅读mouseenter()和mouseover()