常见的鼠标事件

click：鼠标左键点击事件。
contextmenu：鼠标右键点击事件还有其他打开上下文菜单的方式，例如使用特殊的键盘按键，在这种情况下它也会被触发，因此它并不完全是鼠标事件。。
mousedown：鼠标在元素上按下。
mouseup：鼠标在元素上抬起。
mouseover：鼠标移入元素事件。
mouseout：鼠标离开元素事件。
mosemove：鼠标移动时。
dblclick：鼠标左键快速双击时。

$$tip 元素有个 click 方法可以达到点击行为，同时触发 click 事件。 $$

事件顺序

当左键被按下时，事件的产生顺序为：

mousedown → mouseup → click

当右键按下时，事件的产生顺序为：

mousedown → mouseup → contextmenu

$$demo

<button id="btn">点我试试</button> <textarea id="out" cols="30" rows="10"></textarea> <script> document.getElementById("btn").onclick = function (event) { out.value += "click\n" } document.getElementById("btn").oncontextmenu = function (event) { out.value += "contextmenu\n" } document.getElementById("btn").onmousedown = function (event) { out.value += "mousedown\n" } document.getElementById("btn").onmouseup = function (event) { out.value += "mouseup\n" } </script>

按钮标识

事件中的 button 属性可以帮助我们在 mousedown 或 mouseup 中判断当前是哪个按钮被按下。

鼠标按键	event.button
左键	0
中键（滚轮）	1
右键	2
后退键	3
前进键	4

<button id="btn">点我试试</button>
<script>
    document.getElementById("btn").onmousedown = function (event) {
        alert(event.button)
    }
</script>

$$demo

<button id="btn">点我试试</button> <script> document.getElementById("btn").onmousedown = function (event) { alert(event.button) } </script>

组合键

以下这几个属性为布尔值，如果为 true 则表示对应的键同时被按下。

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

<button id="btn">同时按下 Ctrl + Alt + 鼠标左键</button>
<script>
    document.getElementById("btn").onclick = function (event) {
        if (event.ctrlKey && event.altKey) {
            alert("你按对了~")
        }
    }
</script>

$$demo

<button id="btn">同时按下 Ctrl + Alt + 鼠标左键</button> <script> document.getElementById("btn").onclick = function (event) { if (event.ctrlKey && event.altKey) { alert("你按对了~") } } </script>

$$tip

在 Windows 和 Linux 上有 Alt，Shift 和 Ctrl。在 Mac 上还有：Cmd，它对应于属性 metaKey。

在大多数情况下，当在 Windows/Linux 上使用 Ctrl 时，在 Mac 是使用 Cmd。

也就说：当 Windows 用户按下 Ctrl+Enter 或 Ctrl+A 时，Mac 用户会按下 Cmd+Enter 或 Cmd+A，以此类推。

因此，如果我们想支持 Ctrl+click，那么对于 Mac 应该使用 Cmd+click。对于 Mac 用户而言，这更舒适。

即使我们想强制 Mac 用户使用 Ctrl+click —— 这非常困难。问题是：在 MacOS 上左键单击和 Ctrl 一起使用会被解释为 右键单击，并且会生成 contextmenu 事件，而不是像 Windows/Linux 中的 click 事件。

因此，如果我们想让所有操作系统的用户都感到舒适，那么我们应该将 ctrlKey 与 metaKey 一起进行检查。

对于 JS 代码，这意味着我们应该检查 if (event.ctrlKey || event.metaKey)。

坐标

我们常用的坐标系有以下三种。

相对于窗口的坐标：clientX 和 clientY。
相对于文档的坐标：pageX 和 pageY。
相对于屏幕的坐标： screenX 和 screenY 。

练习

完成以下的实例，点击页面移动球。 $$demo <div class="ball"></div> <script> document.addEventListener("click", function (event) { const ball = document.querySelector(".ball")
```
 ball.style.left = `${event.clientX - ball.offsetWidth / 2}px`
 ball.style.top = `${event.clientY - ball.offsetHeight / 2}px`
```
}) </script> <style> html { min-height: 400px;} .ball { position: fixed;
```
 width: 100px;
 height: 100px;

 border-radius: 50%;

 background-color: teal;
```
} </style>

$$answer

<div class="ball"></div>
<script>
    document.addEventListener("click", function (event) {
        const ball = document.querySelector(".ball")

        ball.style.left = `${event.clientX - ball.offsetWidth / 2}px`
        ball.style.top = `${event.clientY - ball.offsetHeight / 2}px`
    })
</script>
<style>
    .ball {
        position: fixed;

        width: 100px;
        height: 100px;

        border-radius: 50%;

        background-color: teal;
    }
</style>