Chrome浏览器页面可滚动时中键auxclick辅助点击事件不触发问题

可行解决方案 #

直接在目标自定义元素的mousedown事件中拦截中键的默认行为即可，具体实现逻辑如下：

核心原理 #

Chrome 浏览器中，可滚动页面的中键自动滚动行为触发时机在mousedown事件的默认动作阶段，早于auxclick事件的派发时机。如果默认滚动行为被触发，后续的auxclick事件会被中断，不再派发。

实现代码 #

给需要监听中键点击的自定义元素添加mousedown事件监听，判断为中键点击时调用preventDefault()即可，原有auxclick监听逻辑不需要修改：

// 你的自定义元素逻辑
class MyCustomElement extends HTMLElement {
  constructor() {
    super()
    // 原有元素初始化逻辑...

    // 新增mousedown拦截逻辑
    this.addEventListener('mousedown', e => {
      // button=1对应鼠标中键
      if (e.button === 1) {
        e.preventDefault()
      }
    })

    // 原有auxclick监听保留
    this.addEventListener('auxclick', e => {
      if (e.button === 1) {
        // 你的中键点击业务逻辑
        console.log('中键点击触发成功')
      }
    })
  }
}
customElements.define('my-custom-el', MyCustomElement)

注意事项 #

• 不要全局绑定该mousedown拦截逻辑，仅给需要响应中键点击的元素绑定即可，不会影响页面其他区域的正常中键滚动功能
• 如果你绑定mousedown事件时主动设置了passive: true，需要将该配置改为passive: false，否则preventDefault()会失效

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