JavaScript 基础
Document
运算符
深入数据和类型
函数进阶
原型、继承
类
浏览器存储
Web API
事件
错误处理
异步编程
网络请求
模块
练习
实例
工具与规范
软件架构模式
设计模式
鼠标是重要的输入设备之一,这个章节介绍一下鼠标事件及其属性。
$$tip
鼠标事件不止来自鼠标设备,也包括了手机、平板等设备的点触。
$$
常见的鼠标事件
- 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>
$$