一. 鼠标事件

总结

鼠标事件有以下属性：

• 按钮：button。

• 组合键（如果被按下则为 true）：altKey，ctrlKey，shiftKey 和 metaKey（Mac）。

  • 如果你想处理 Ctrl，那么不要忘记 Mac 用户，他们通常使用的是 Cmd，所以最好检查 if (e.metaKey || e.ctrlKey)。

• 窗口相对坐标：clientX/clientY。

• 文档相对坐标：pageX/pageY

[1] 鼠标事件类型

• mousedown/mouseup

  在元素上点击/释放鼠标按钮。

• mouseover/mouseout

  鼠标指针从一个元素上移入/移出。

• mousemove

  鼠标在元素上的每个移动都会触发此事件。

• click

  如果使用的是鼠标左键，则在同一个元素上的 mousedown 及 mouseup 相继触发后，触发该事件。

• dblclick

  在短时间内双击同一元素后触发。如今已经很少使用了。

• contextmenu

  在鼠标右键被按下时触发。还有其他打开上下文菜单的方式，例如使用特殊的键盘按键，在这种情况下它也会被触发，因此它并不完全是鼠标事件。

[2] 组合键

（如果被按下则为 true）：altKey，ctrlKey，shiftKey 和 metaKey

事件属性：

• shiftKey：Shift
• altKey：Alt（或对于 Mac 是 Opt）
• ctrlKey：Ctrl
• metaKey：对于 Mac 是 Cmd

案例1: 这个按钮仅在 Alt+Shift+click 时才有效：

<button id="button">Alt+Shift+Click on me!</button> 

<script> button.onclick = function(event) { 
    if (event.altKey && event.shiftKey) {
        alert('Hooray!');
        } 
     }; 
</script>

注意点:windows用户的ctrl和mac用户的cmd需一起检查

if (event.ctrlKey || event.metaKey){ }

[3] 坐标：clientX/Y，pageX/Y

所有的鼠标事件都提供了两种形式的坐标：

1. 相对于窗口的坐标：clientX 和 clientY。
2. 相对于文档的坐标：pageX 和 pageY。

[4] 防止在鼠标按下时的选择

防止复制:

如果我们想禁用选择以保护我们页面的内容不被复制粘贴，那么我们可以使用另一个事件：oncopy

<div oncopy="alert('Copying forbidden!');return false" > 
    Dear user, 
    The copying is forbidden for you. 
    If you know JS or HTML, then you can get everything from the page source though. 
</div>

\

参考: zh.javascript.info/mouse-event…