javascript - 仅当光标来自该元素外部时如何触发 "onmouseenter"

Question

我有 2 张图片，一张和两张

悬停在one上时，显示two，隐藏one

然后，如果我点击two，它应该再次隐藏并显示one

到目前为止一切正常

但是，问题是，鼠标已经在 one 图像上，所以 onmouseenter 再次触发。我希望它仅在鼠标来自没有 jQuery 的图像外部时触发

就像聊天图标一样here在右下角

document.getElementById("one").onmouseenter = function onmouseoverRobot() {
    document.querySelector("#two").style = 'display:inline-block !important'
    document.querySelector("#one").style = 'display:none !important'
}


document.getElementById("two").onclick = function X_CHAT_01() {

    document.querySelector("#two").style = 'display:none !important'
    
    document.querySelector("#one").style = 'display:inline-block !important'
}

<img id='one' src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSoMUKwCL1uINRV035jkpfQzAbiObKqraXA6369mZBe0To0UuWP'>

<img id='two' style='display:none' src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSMYIpY4d8KlTzhAd38KZW8DIadeEV59WtLlxeIH3PS4uPXL0RP'>

Answer 1

为了避免在显示图像时触发 mouseenter 事件，请尝试移除监听器，然后在 mouseleave 事件之后将其添加回来。

1. img#one:mouseenter - 从 img#one 中移除 mouseenter 监听器。隐藏 img#one 并显示 img#two。

2. img#two:点击 - 显示img#one并隐藏img#two。

3. img#one:mouseleave - 添加 mouseenter 监听器到 img#one。

您还可以使用一次性监听器来实现更简单的流程。

const onMouseEnter = function() {
    hide(one)
    show(two)
    two.addEventListener("click", onClick, { once: true })
}

const onClick = function() {
    one.addEventListener("mouseleave", onMouseLeave, { once: true })
    hide(two)
    show(one)
}

const onMouseLeave = function() {
    one.addEventListener("mouseenter", onMouseEnter, { once: true })
}

one.addEventListener("mouseenter", onMouseEnter, { once: true })