我不能使用上面的任何建议。 为什么我更喜欢我的解决方案? 此方法检查鼠标是否在您所选择的任何时间停留在元素上。 Mouseenter和:hover很酷，但是Mouseenter只在你移动鼠标时触发，而不是当元素在鼠标下移动时触发。 :盘旋很可爱，但是…即

所以我这样做:

没有1。每次鼠标移动时，存储鼠标x, y位置， 没有2。检查鼠标是否在任何匹配查询的元素上…比如触发mouseenter事件

// define mouse x, y variables so they are traced all the time
var mx = 0; //  mouse X position
var my = 0; //  mouse Y position

// update mouse x, y coordinates every time user moves the mouse
$(document).mousemove(function(e){
    mx = e.pageX;
    my = e.pageY;
});

// check is mouse is over an element at any time You need (wrap it in function if You need to)
$("#my_element").each(function(){
    boxX = $(this).offset().left;
    boxY = $(this).offset().top;
    boxW = $(this).innerWidth();
    boxH = $(this).innerHeight();
    if ((boxX <= mx) &&
        (boxX + 1000 >= mx) &&
        (boxY <= my) &&
        (boxY + boxH >= my))
    {
        // mouse is over it so you can for example trigger a mouseenter event
        $(this).trigger("mouseenter");
    }
});

For those like me who needed an answer that didn't depend on browser mouse-over/enter/leave events or hover states. I had a situation in a home-page slider, the left and right slide click areas could overlap (or sometimes completely cover) the CTA buttons in the banner - this renders all those previous methods useless (browser only reports events on the element with the highest z-index). I was tasked with making the click event care more about the button than the banner functionality when the click is over the button.

我的完整解是这样的:

jQuery('.carousel-control-prev').on('click.testClick', function(e) {
    var bannerButtons = jQuery('.banner-content a');
    for (var i = 0; i < bannerButtons.length; i++) {
        if (isMouseOver(bannerButtons.eq(i), e)) {
            e.preventDefault();
            e.stopPropagation();
            bannerButtons[i].click();
        }
    }
});

function isMouseOver($el, e) {
    if ($el.is(':visible')) {
        var offset = $el.offset();
        var x = (e.pageX - offset.left);
        var y = (e.pageY - offset.top);
        if (x > 0 && x < $el.outerWidth() && y > 0 && y < $el.outerHeight()) {
            return true;
        }
    }
    return false;
}

这可能需要更多的工作和测试，但现在它做了我需要的-在这种情况下是拦截横幅左键点击，检查鼠标是否恰好在CTA按钮上，如果是，点击CTA而不是横幅导航。

我完全理解更好的解决方案是重新设计横幅区域，这样就不会发生这种情况，但设计超出了我的控制范围。

我采纳了SLaks的想法，并将其整合到一个小班中。

function HoverWatcher(selector){
  this.hovering = false;
  var self = this; 

  this.isHoveringOver = function() { 
    return self.hovering; 
  } 

    $(selector).hover(function() { 
      self.hovering = true; 
    }, function() { 
      self.hovering = false; 
    }) 
} 

var box1Watcher = new HoverWatcher('#box1');
var box2Watcher = new HoverWatcher('#box2');



$('#container').click(function() {
  alert("box1.hover = " + box1Watcher.isHoveringOver() +
        ", box2.hover = " + box2Watcher.isHoveringOver());
});

在鼠标退出时设置超时以淡出并将返回值存储为对象中的数据。然后onmouseover，如果数据中有值，取消超时。

删除淡出的回调数据。

使用mouseenter/mouseleave实际上成本更低，因为当child鼠标悬停/鼠标退出触发时，它们不会触发菜单。

我不能使用上面的任何建议。 为什么我更喜欢我的解决方案? 此方法检查鼠标是否在您所选择的任何时间停留在元素上。 Mouseenter和:hover很酷，但是Mouseenter只在你移动鼠标时触发，而不是当元素在鼠标下移动时触发。 :盘旋很可爱，但是…即

所以我这样做:

没有1。每次鼠标移动时，存储鼠标x, y位置， 没有2。检查鼠标是否在任何匹配查询的元素上…比如触发mouseenter事件

// define mouse x, y variables so they are traced all the time
var mx = 0; //  mouse X position
var my = 0; //  mouse Y position

// update mouse x, y coordinates every time user moves the mouse
$(document).mousemove(function(e){
    mx = e.pageX;
    my = e.pageY;
});

// check is mouse is over an element at any time You need (wrap it in function if You need to)
$("#my_element").each(function(){
    boxX = $(this).offset().left;
    boxY = $(this).offset().top;
    boxW = $(this).innerWidth();
    boxH = $(this).innerHeight();
    if ((boxX <= mx) &&
        (boxX + 1000 >= mx) &&
        (boxY <= my) &&
        (boxY + boxH >= my))
    {
        // mouse is over it so you can for example trigger a mouseenter event
        $(this).trigger("mouseenter");
    }
});

你可以使用jQuery的悬停事件来手动跟踪:

$(...).hover(
    function() { $.data(this, 'hover', true); },
    function() { $.data(this, 'hover', false); }
).data('hover', false);

if ($(something).data('hover'))
    //Hovered!