点击容器侧边时禁用/清除视频播放暂停切换功能的实现咨询

你当前编写的代码无法直接实现需求，存在3处核心问题需要调整：

• 绑定的事件类型错误：你目前监听的是mousemove鼠标移动事件，需求是点击时触发判断，需要替换为click事件
• 区域比例计算逻辑错误：你用点击位置相对于整个窗口的比例做判断，仅当container容器占满全屏宽度时才生效，只要容器存在左右边距、不是100%视口宽度，区域判断就会完全失准，应该基于点击位置相对于container容器自身的偏移量计算比例
• 代码笔误：$ls(window)属于错误写法，常规jQuery调用应为$(window)

修正后可运行的代码示例 #

HTML部分 #

<div class="container">
  <video style="width: 100%" src="你的视频地址"></video>
</div>

JS部分 #

$('.container').on('click', function (event) {
  // 获取容器的位置、尺寸信息，不受页面滚动影响
  const containerRect = this.getBoundingClientRect()
  // 计算点击位置相对于容器左边缘的水平偏移占容器总宽度的比例
  const clickRatio = (event.clientX - containerRect.left) / containerRect.width

  if (clickRatio > 0.4 && clickRatio < 0.6) {
    // 中间区域，执行播放暂停切换逻辑
    const video = $(this).find('video')[0]
    video.paused ? video.play() : video.pause()
  }
  // 左右区域不需要额外操作，不写逻辑即可，不会触发播放暂停
})

内容的提问来源于stack exchange，提问作者runnerDev