子元素导致父 onmousemove 事件侦听器出现问题

Question

我为我的问题创建了一个非常简单的示例。

Fiddle Link

在小提琴中，我创建了一个名为 parent 的 div，其中包含 2 个 img （为了简单起见，我在示例中使用 div，但在我的项目中，这些是图像） 和控制器 div。我通过将第二张图片定位为absolute，将图片放在彼此的顶部。

我想使用 clip-path 属性来剪辑第二张图像，我单击然后将控制器“拖到 parent div 上。

但是 controller div 会导致 parent mousemove 事件出现问题，只要光标移到控制器 div 上，mouseout 事件就会在 上触发父 div 导致动画故障。

将pointer-events: none 属性添加到controller div 修复了故障，但它也消除了元素的各种鼠标交互，我想要点击和拖动效果。

我想创建类似this网站使用的效果。

Answer 1

const parent = document.getElementById('parent'),
  img2 = document.getElementById('img2'),
  controller = document.getElementById('controller');

let pressed = false;

parent.addEventListener('mousemove', (e) => {
  if (pressed) {
    img2.style.clipPath = `inset(0px 0px 0px ${e.clientX - parent.offsetLeft}px)`;
    controller.style.left = `${e.clientX - parent.offsetLeft}px`;
  }
});

controller.addEventListener('mousedown', (e) => {
  pressed = true;
});

controller.addEventListener('mouseup', (e) => {
  pressed = false;
});

#parent {
  width: 100%;
  position: relative;
}

#img1,
#img2 {
  display: block;
  width: 100%;
  height: 200px;
  pointer-events: none;
}

#img1 {
  background: red;
}

#img2 {
  background: green;
  position: absolute;
  top: 0;
  left: 0;
}

#controller {
  position: absolute;
  top: 0;
  left: 10px;
  width: 10px;
  height: 100%;
  background: black;
  z-index: 1;
  cursor: ew-resize;
  /* pointer-events: none; */
}

<div id="parent">
  <div id="img1"></div>
  <div id="img2"></div>
  <div id="controller"></div>
</div>

<h4>
  Click and Drag the controller to clip the front image
</h4>

问题是，您使用了offsetX，它定义了controller 元素左上边缘之间的距离。这意味着距离大约是5px，你的控制器从左边跳到5px，现在距离更大了，控制器向后跳等等。

MouseEvent 接口的 offsetX 只读属性提供 该事件之间鼠标指针 X 坐标的偏移量 以及目标节点的内边距。

因此，您可以使用鼠标 x 位置和父级 x 位置之间的差异来定位控制器：

改为使用clientX 获取鼠标相对于窗口的位置。

img2.style.clipPath = `inset(0px 0px 0px ${e.clientX - parent.offsetLeft}px)`;
controller.style.left = `${e.clientX - parent.offsetLeft}px`;

top表达式的含义如下：

<mouse x-position> - <distance between left screen edge and parent>

Answer 2

问题似乎是控制器的定位有时（并非总是）“干扰”父级上 offsetX 的读取。并且偏移量下降（在给定的小提琴中下降到 0 或高达 10 左右）。因此，当控制器向后移动然后再次向上移动时，您会得到闪烁。

我目前无法完全解释这一点，特别是因为控制器是一个绝对定位的元素。

但是，一种解决方案是将控制器移出父级。

更新 如果忽略控制器中的任何鼠标移动，则可以将控制器留在父级中（因此当鼠标移动在范围内时，我们不会得到 0 到 10 的偏移读数控制器 - 忽略它们，我们将让事件冒泡到父级，然后可以读取偏移量）。 _

<head>
<style>
* {
  margin: 0;
  padding: 0;
}

#parent {
  width: 100%;
  position: relative;
}

#img1, #img2 {
  display: block;
  width: 100%;
  height: 200px;
  pointer-events: none;
}

#img1 {
  background: red;
}

#img2 {
  background: green;
  position: absolute;
  top: 0;
  left: 0;
}

#controller {
  position: absolute;
  top: 0;
  left: 10px;
  width: 10px;
  height: 100%;
  height: 200px;
  background: black;
  z-index: 1;
  cursor: ew-resize;
  /* pointer-events: none; */
}
</style>
</head>
<body>

<div id="parent">
  <div id="img1"></div>
  <div id="img2"></div>
  <div id="controller"></div>
</div>

<h4>
  Click and Drag the controller to clip the front image
</h4>

<!-- img1, img2 are images in my case so i named them as imgs -->
<script>
const parent = document.getElementById('parent'),
            img2 = document.getElementById('img2'),
            controller = document.getElementById('controller');
      
let pressed = false;
console.log(pressed)

parent.addEventListener('mousemove', (e) => {
    if(!pressed) return;
  if (e.target != parent) return;
    img2.style.clipPath = `inset(0px 0px 0px ${e.offsetX}px)`;
  controller.style.left = `${e.offsetX}px`;
});

// for testing purpose
 /* parent.addEventListener('mouseout', (e) => {
  console.log('mouse out is called');
 }); */

controller.addEventListener('mousedown', (e) => {
    pressed = true;
});

controller.addEventListener('mouseup', (e) => {
    pressed = false;
});
</script>
</body>