鼠标是重要的输入设备之一,这个章节介绍一下鼠标事件及其属性。

$$tip

鼠标事件不止来自鼠标设备,也包括了手机、平板等设备的点触。

$$

常见的鼠标事件

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

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

事件顺序

当左键被按下时,事件的产生顺序为:

  • mousedownmouseupclick

当右键按下时,事件的 产生顺序为:

  • mousedownmouseupcontextmenu

$$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 属性可以帮助我们在 mousedownmouseup 中判断当前是哪个按钮被按下。

鼠标按键 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 则表示对应的键同时被按下。

  • shiftKeyShift
  • altKeyAlt(对于 Mac 是  Opt
  • ctrlKeyCtrl
  • 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)

$$

坐标

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

  1. 相对于窗口的坐标:clientX 和 clientY
  2. 相对于文档的坐标:pageX 和 pageY
  3. 相对于屏幕的坐标: screenXscreenY

image


练习

  1. 完成以下的实例,点击页面移动球。 $$demo <div class="ball"></div> <script> document.addEventListener("click", function (event) { const ball = document.querySelector(".ball")

     const width = parseFloat(getComputedStyle(ball).width)
     const height = parseFloat(getComputedStyle(ball).height)
    
     ball.style.left = `${event.clientX - width / 2}px`
     ball.style.top = `${event.clientY - height / 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")

        const width = parseFloat(getComputedStyle(ball).width)
        const height = parseFloat(getComputedStyle(ball).height)

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

        width: 100px;
        height: 100px;

        border-radius: 50%;

        background-color: teal;
    }
</style>

$$