角度点击停止传播 - HTML

在前端开发中，我们常常需要实现一些点击事件，来触发某些操作。但是，有时我们需要在某个特定的角度上点击才能停止传播。这个问题可以用 HTML 的事件嵌套来解决。

事件传播

在 HTML 中，事件的传播是从外到内的，也就是说，如果你在一个父元素上注册了一个点击事件，那么当你在它的子元素上点击时，这个事件也会被触发。

停止传播

我们可以使用事件对象中的 stopPropagation() 方法来阻止事件的传播。举个例子，在下面的代码中，当我们点击子元素时，它的点击事件会触发，并阻止事件冒泡到父元素。

<div onclick="alert('parent')">
  <div onclick="event.stopPropagation(); alert('child')">
    Click here
  </div>
</div>

但是，有时候我们需要在某个角度上点击才能停止传播。比如说，我们有一个父元素和两个子元素，其中一个子元素上的点击事件会触发并停止传播，而另一个子元素上的点击事件则会继续传播到父元素上。

我们可以在一个子元素上注册两个事件，一个是正常的点击事件，一个是用来停止传播的点击事件。在后面的事件处理函数中，我们可以将事件对象传递给前面的事件处理函数，并判断点击的角度是否满足条件，如果满足，则触发停止传播的事件。

下面是一个示例代码：

<div id="parent" onclick="alert('parent')">
  <div id="child1" onclick="alert('child1'); stopPropagation(event);">
    Click here to stop propagation
  </div>
  <div id="child2" onclick="alert('child2');">
    Click here to continue propagation
  </div>
</div>

<script>
function stopPropagation(event) {
  const [x, y] = [event.clientX, event.clientY]; // 获取点击的坐标
  const [left, top, width, height] = event.target.getBoundingClientRect(); // 获取元素的位置和大小
  const [cx, cy] = [left + width / 2, top + height / 2]; // 获取元素的中心坐标
  const angle = Math.atan2(y - cy, x - cx) * 180 / Math.PI; // 计算角度
  if (angle < -45 || angle > 45) { // 如果角度不在 [-45, 45] 范围内，则停止传播
    event.stopPropagation();
  }
}
</script>

这个示例代码中，我们先定义了一个名为 stopPropagation 的函数，它接受一个事件对象作为参数。在函数中，我们首先使用 event.clientX 和 event.clientY 获取点击的坐标，并使用 event.target.getBoundingClientRect() 获取元素的位置和大小，以及中心坐标。

然后，我们使用 Math.atan2(y - cy, x - cx) * 180 / Math.PI 计算出点击坐标和元素中心坐标之间的角度，再使用条件分支判断角度是否在 [-45, 45] 范围内。

如果角度在这个范围内，则说明点击发生在元素的左右两侧，停止传播；否则，事件会传播到父元素上，触发父元素中的点击事件。

总结

在 HTML 中，事件传播是从外到内的，也就是说，当你在一个父元素上注册了一个点击事件，那么当你在它的子元素上点击时，这个事件也会被触发。我们可以使用 event.stopPropagation() 方法来阻止事件的传播。

有时候，我们需要在某个特定的角度上点击才能停止传播。我们可以在一个子元素上注册两个事件，一个是正常的点击事件，一个是用来停止传播的点击事件。在停止传播的点击事件处理函数中，我们可以计算出点击的角度，并根据角度来判断是否需要停止事件的传播。