为什么 mouseout 和 mouseleave 总是触发
Why is mouseout and mouseleave always firing
我真的不明白为什么 p
元素总是隐藏(因此 mouseout
总是被触发):
const canvas = document.querySelector("canvas");
const infoBox = document.querySelector("#info-box")
canvas.addEventListener("mousemove", evt => {
evt.preventDefault()
infoBox.style.display="block"
infoBox.style.position="absolute"
infoBox.style.top= evt.clientY+"px"
infoBox.style.left=evt.clientX+"px"
console.log("moved")
})
canvas.addEventListener("mouseout", evt => {
evt.preventDefault()
infoBox.style.display="none"
console.log("exit")
}, false)
canvas{
border-width: 0px;
border-color:#212121;
background-color: blue;
}
<canvas></canvas>
<div id="info-box" style="display: none;"><p>Hello</p></div>
每次 info-box 出现时都会退出。
在#info-box
div上加上一个偏移量意味着鼠标认为它没有离开canvas.
const canvas = document.querySelector("canvas");
const infoBox = document.querySelector("#info-box");
const mouseOffset = 2;
canvas.addEventListener("mousemove", evt => {
evt.preventDefault()
infoBox.style.display = "block"
infoBox.style.position = "absolute"
infoBox.style.top = evt.clientY + mouseOffset + "px" // add an offset here
infoBox.style.left = evt.clientX + mouseOffset + "px" // and here
console.log("moved")
})
canvas.addEventListener("mouseout", evt => {
evt.preventDefault()
infoBox.style.display = "none"
console.log("exit")
}, false)
canvas {
border-width: 0px;
border-color: #212121;
background-color: blue;
}
<canvas></canvas>
<div id="info-box" style="display: none;">
<p>Hello</p>
</div>
我真的不明白为什么 p
元素总是隐藏(因此 mouseout
总是被触发):
const canvas = document.querySelector("canvas");
const infoBox = document.querySelector("#info-box")
canvas.addEventListener("mousemove", evt => {
evt.preventDefault()
infoBox.style.display="block"
infoBox.style.position="absolute"
infoBox.style.top= evt.clientY+"px"
infoBox.style.left=evt.clientX+"px"
console.log("moved")
})
canvas.addEventListener("mouseout", evt => {
evt.preventDefault()
infoBox.style.display="none"
console.log("exit")
}, false)
canvas{
border-width: 0px;
border-color:#212121;
background-color: blue;
}
<canvas></canvas>
<div id="info-box" style="display: none;"><p>Hello</p></div>
每次 info-box 出现时都会退出。
在#info-box
div上加上一个偏移量意味着鼠标认为它没有离开canvas.
const canvas = document.querySelector("canvas");
const infoBox = document.querySelector("#info-box");
const mouseOffset = 2;
canvas.addEventListener("mousemove", evt => {
evt.preventDefault()
infoBox.style.display = "block"
infoBox.style.position = "absolute"
infoBox.style.top = evt.clientY + mouseOffset + "px" // add an offset here
infoBox.style.left = evt.clientX + mouseOffset + "px" // and here
console.log("moved")
})
canvas.addEventListener("mouseout", evt => {
evt.preventDefault()
infoBox.style.display = "none"
console.log("exit")
}, false)
canvas {
border-width: 0px;
border-color: #212121;
background-color: blue;
}
<canvas></canvas>
<div id="info-box" style="display: none;">
<p>Hello</p>
</div>