鼠标点击触发鼠标离开

Question

我有一个绝对定位的 div，我试图跟踪鼠标何时移过它，以及鼠标何时离开。不幸的是，单击框中的文本偶尔会触发 mouseleave 事件。

演示：js fiddle

如何防止这种情况发生？

JS

let tooltip = document.createElement('div');
tooltip.innerHTML = 'HELLO WORLD';
tooltip.setAttribute('class', 'tooltip');
tooltip.style.display = 'none';

tooltip.onclick = evt => {
    console.log('click')
    evt.stopPropagation();
}
tooltip.ondblclick = evt => {
    console.log('double click')
    evt.stopPropagation();
}

tooltip.onmouseenter = () => {
    console.log('tooltip mouse OVER');
}

tooltip.onmouseleave = () => {
    console.log('tooltip mouse OUT')
}

tooltip.style.left = '290px';
tooltip.style.top = '50px';
tooltip.style.display = 'block';
document.body.appendChild(tooltip);

HTML

<div style="width: 300px; height: 300px; background-color: lightblue">

</div>

CSS

.tooltip {
    position: absolute;
    /*display: none;*/
    left: 100;
    top: 100;
    min-width: 80px;
    height: auto;
    background: none repeat scroll 0 0 #ffffff;
    border: 1px solid #6F257F;
    padding: 14px;
    text-align: center;
}

Answer 1

用MouseEvent.buttons检查主按钮是否被按下。

tooltip.onmouseleave = (e) => {
  if (e.buttons !== 1) {
    console.log('tooltip mouse OUT')
  }
}

Answer 2

@trincot 的回答几乎对我有用。就我而言，我正在处理弹出窗口。当我点击一个按钮时，它会触发一个弹出窗口，显示在触发按钮的顶部。所以document.elementFromPoint(e.clientX, e.clientY) 返回的是弹出框元素而不是触发按钮。这是我解决这个问题的方法：

mouseleave(ev: MouseEvent) {
    const trigger: HTMLElement = document.getElementById('#myTrigger');
    const triggerRect = trigger.getBoundingClientRect();
    const falsePositive = isWithingARect(ev.clientX, ev.clientY, triggerRect);

    if (!falsePositive) {
        // do what needs to be done
    }
}

function isWithingARect(x: number, y: number, rect: ClientRect) {
  const xIsWithin = x > rect.left && x < rect.right;
  const yIsWithin = y > rect.top && y < rect.bottom;
  return xIsWithin && yIsWithin;
}

Answer 3

var trackmouseup = null;

$('.box').mouseup(function(event){
    if(trackmouseup){
        clearTimeout(trackmouseup);
    }
    trackmouseup = setTimeout(function(){
        trackmouseup = null;
    }, 2); //it must be 2ms or more

});


$('.box').mouseleave(function(event){
    //if this event is triggered by click, there must be a mouse up event triggered 2ms ago
    if(trackmouseup){
        return;
    }

    //to do something
});

Answer 4

我之前在这里查看了答案和cmets，但最近找到了一种方法来检查mouseleave事件是否被错误触发

我在mouseleave 处理程序中添加了一个检查：

private handleMouseLeave(event: MouseEvent) {
    if(event.relatedTarget || event.toElement){
        // do whatever
    }
    // otherwise ignore
}

根据我在 Chrome v64 上的测试，只要快速点击导致触发 mouseleave 事件，这两个值都会是 null。 relatedTarget 是为了与旧版浏览器兼容

注意：如果鼠标离开 target 元素并进入浏览器（例如选项卡、菜单等）或离开浏览器窗口，这两个值也将是 null。出于我的目的，这不是问题，因为它是我正在使用的滑动菜单，在我的特定情况下，离开浏览器窗口不应关闭菜单。

注意：每次点击我的菜单时，最新的 Firefox 版本（2018 年 2 月）似乎都会触发 mouseleave！一定要调查一下

Answer 5

我也遇到了这个错误。就我而言，我将标签包装的复选框添加到列表中，并将列表包装在 div 中。我还使用了一些<hr> 标签的列表项。如果您快速单击复选框和标签，您偶尔会在包装 div 上触发 mouseleave 事件。这不应该发生，因为所有单击的元素都是 div.wrapper 的子元素。

...
  wrapper.addEventListener(
    'mouseleave',
    (e) => {
      logger('mouseleave fired');
      console.log('mouseleave fired', e);
    },
    false
  );
...

jsfiddle demo

这是复制的 gif。在线索区域内点击（授予一定强度和移动），标签和输入框的点击事件被触发，然后你会看到两个 mouseleave 事件错误触发，然后当鼠标真正触发时第三个离开蓝色区域。

Answer 6

这似乎是一个错误（我可以在 Chrome 中重现它，单击鼠标向下和鼠标向上依次快速发生）。

我建议通过检查事件触发时鼠标是否仍在元素上方来解决此问题：

tooltip.onmouseleave = (e) => {
    if (tooltip === document.elementFromPoint(e.clientX, e.clientY)) {
        console.log('false positive');
        return;
    }
    console.log('tooltip mouse OUT')
}

缺点是当浏览器窗口失去焦点时，这也被认为是误报。如果这对您来说是个问题，请查看this answer。