mouse event which


在开发 nw 上的某个页面时,遇到了这么一个问题:

页面里某个元素需要用 js 写拖拽移动操作,一般的做法是通过 mousedown mousemove mouseup 来做拖拽模拟,这一部分也是能够正常工作的;但是,给这个元素同时加上 contextmenu 事件并唤起右键菜单时,会发生冲突:因为触发 contextmenu 事件的实际操作行为是在元素上点击鼠标右键,而鼠标右键也能触发 mousedown 事件,导致了预期之外的拖拽开始。

能否使得 contextmenu 触发的时候不触发 mousedown 呢?尝试了各种方式,仿佛都没有办法让这两个事件直接的阻止彼此的触发行为。突然想到,如果能知道触发 mousedown 的来源是否是右键,不就能阻止干扰了吗?查了一下资料,果然还是有这种属性的, 那就是 MouseEvent.which:

MouseEvent.which 指代了当事件触发的时候,是哪一个按钮被按下了。虽然这个特性并非是标准里所规定的,但是似乎各浏览器厂商很早就已实现了。

以下是各个值的说明:

  • 0: 没有按键
  • 1: 左键
  • 2: 中键
  • 3: 右键

有了这个属性,那么以上遇到的问题就可以解决了。只需简单的在 mousedown 触发的时候判断 event.which 是否为 3,如果是,return 掉即可。