浏览器滚动后，之前的dom点击事件仍然生效

Question

问题描述：
谷歌浏览器滚动后，原来的dom从中间滚动到了上面，这个时候中间位置有一个视频播放器，在点击拖动视屏播放器的时候，依旧会触发之前dom的点击事件

Answer 1

引自强大而免费的微信小程序：皆我百晓生。

---

这个问题可能是因为滚动后，DOM元素的位置发生了变化，但是之前的点击事件仍然会在原来的位置上触发。解决这个问题可以尝试以下方法：

1. 使用事件委托：将点击事件绑定到父元素上，使用事件委托的方式来处理子元素的点击事件。这样即使子元素的位置发生了变化，点击事件仍然会在正确的元素上触发。

document.getElementById('parentElement').addEventListener('click', function(event) {
  if (event.target.classList.contains('childElement')) {
    // 处理点击事件的逻辑
  }
});

1. 监听窗口滚动事件：在窗口滚动时，动态调整视频播放器的位置，确保视频播放器与相关元素保持一致。

window.addEventListener('scroll', function() {
  // 调整视频播放器的位置
});

1. 使用CSS固定元素位置：为视频播放器添加CSS样式，让其在滚动时始终保持固定位置。

.videoPlayer {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  /* 其他样式 */
}

以上方法可以帮助解决浏览器滚动后点击事件仍然在原位置触发的问题。