☰

クリックするとマウスが離れる 質問する

tag-icon • tag-icon javascript google-chrome dom mouseevent
クリックするとマウスが離れる 質問する

絶対位置の div があり、マウスがその上を移動したときと、マウスが離れたときを追跡しようとしています。残念ながら、ボックス内のテキストをクリックすると、mouseleave イベントがトリガーされることがあります。

デモ：js フィドル

これを防ぐにはどうしたらいいでしょうか?

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>

CS

.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;
}

ベストアンサー1

これはバグのようです (Chrome でマウスのクリックとマウスのアップダウンを次々に素早く繰り返すことで再現できました)。

この問題を回避するには、イベントが発生した瞬間にマウスが要素の上にあるかどうかを確認することをお勧めします。

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

欠点は、ブラウザウィンドウがフォーカスを失うと、誤検知とみなされることです。これが問題になる場合は、この答え。

おすすめ記事