小编wui*_*wui的帖子
触发鼠标悬停事件取决于窗口大小
我想在 3D 转换的画布上绘图，但 Chrome 中的 mouseout 事件遇到一些奇怪的问题。
当我将 JSFiddle 窗口大小设置为 2100px 时，mouseout 事件会正常工作。
但是，当我将窗口大小设置为 1900px 时，鼠标事件大约在红线处触发。
这真的很奇怪，因为 JSFiddle 窗口大小决定了鼠标移出事件是否被正确触发。
到目前为止，鼠标移出事件在 Firefox 和 Edge 中可以正确触发，但在 Chrome 中无法正常工作！此外，我们在使用滚动位置（例如，通过添加一些<br>' 并滚动影响鼠标移出事件位置）、窗口大小（参见上图）或画布宽度（例如，设置画布）时看到了一些奇怪的行为width 为 200 可以正确触发鼠标移出事件）。
有谁可以帮助我解决这个错误，以便浏览器正确地触发 mouseout 事件，而与窗口大小或滚动位置无关？
代码：JSFiddle
演示：YouTube
小提琴中的代码片段：
$(".dynamic-drawing-canvas").on("mouseout", function(e) {
console.log(e.clientX, e.clientY)
})#container {
pointer-events: none;
margin-left: 400px;
}
.dynamic-drawing-canvas {
pointer-events: auto;
background-color: blue;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<canvas class="dynamic-drawing-canvas" width="1200" height="300" style="
transform: matrix3d(1.0303, 0.00317459, 0, 2.13211e-05, -0.68458, -0.165542, 0, -0.00111181, 0, 0, …18
推荐指数
推荐指数
1
解决办法
解决办法
846
查看次数
查看次数