Vue.js中addEventListener("mousedown.left")无法触发问题排查

• 你用mousedown.left这种写法绑定事件是错误的，DOM原生事件里不存在这种命名方式，浏览器无法识别，所以左键点击没有任何反应。
• 正确的处理逻辑是绑定普通的mousedown和mouseup事件，在回调函数里通过事件对象的button属性判断点击类型：
  • 左键点击时，event.button的值为0
  • 右键点击时，event.button的值为2
• 另外右键点击会触发浏览器默认上下文菜单，仍需要绑定contextmenu事件并调用event.preventDefault()阻止默认行为，避免和自定义右键逻辑冲突。

给你一个简单的代码示例：

// 绑定元素的mousedown事件
yourElement.addEventListener('mousedown', function(e) {
  if (e.button === 0) {
    // 左键按下的逻辑，修改data数组等操作
  } else if (e.button === 2) {
    // 右键按下的逻辑
  }
});

// 绑定document的mouseup事件
document.addEventListener('mouseup', function(e) {
  if (e.button === 0) {
    // 左键松开后的逻辑
  }
});

// 阻止右键默认菜单弹出
yourElement.addEventListener('contextmenu', function(e) {
  e.preventDefault();
});

• 之前改成mousedown.left后，浏览器找不到对应的事件类型，回调函数根本没执行，自然不会触发change事件；而右键的contextmenu事件你没修改，所以还能正常触发。

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