探索在JavaScript中处理鼠标事件的基础
查看更多JavaScript事件
在查看鼠标事件时,我们可以与之交互
mousedown
按下鼠标按钮mouseup
释放鼠标按钮click
点击事件dblclick
双击事件mousemove
当鼠标移到元素上时mouseover
当鼠标移到一个元素或其子元素之一上时mouseenter
当鼠标移到元素上时。如同mouseover
但不会冒泡(稍后会详细介绍!)mouseout
当鼠标移出元素时,以及当鼠标进入子元素时mouseleave
当鼠标移出元素时。如同mouseout
但不会冒泡(稍后会详细介绍!)contextmenu
打开上下文菜单时,例如,在鼠标右键上单击
事件重叠。当您追踪一个click
事件,就像跟踪mousedown
跟一个mouseup
事件。如果是dblclick
,click
也被解雇了两次。
mousedown
,mousemove
和mouseup
可以组合使用以跟踪拖放事件。
小心mousemove
,因为它在鼠标移动过程中会多次触发。我们需要申请节流,这是我们在分析滚动时会谈论的更多内容。
在一个偶数处理程序中,我们可以访问许多属性。
例如,在发生鼠标事件时,我们可以通过检查button
事件对象的属性:
const link = document.getElementById('my-link')
link.addEventListener('mousedown', event => {
// mouse button pressed
console.log(event.button) //0=left, 2=right
})
这是我们可以使用的所有属性:
altKey
如果在触发事件时按了alt键,则为truebutton
如果有的话,则触发鼠标事件时按下的按钮编号(通常为0 =主按钮,1 =中间按钮,2 =右键)。对通过单击按钮引起的事件起作用(例如,单击)buttons
如果有的话,一个数字,指示在任何鼠标事件上按下的按钮。clientX
/clientY
鼠标指针相对于浏览器窗口的x和y坐标,与滚动无关ctrlKey
如果在触发事件时按了ctrl键,则为truemetaKey
如果触发事件时按下了meta键,则返回truemovementX
/movementY
鼠标指针相对于上一个mousemove事件的位置的x和y坐标。用于在移动鼠标时跟踪鼠标速度region
在Canvas API中使用relatedTarget
事件的次要目标,例如移动时screenX
/screenY
屏幕坐标中鼠标指针的x和y坐标shiftKey
如果在触发事件时按下了Shift键,则为true
免费下载我的JavaScript初学者手册
更多浏览器教程:
- HTML5提供了一些有用的技巧
- 我如何使基于CMS的网站脱机工作
- 渐进式Web应用程序完整指南
- 提取API
- 推送API指南
- 频道消息传递API
- 服务人员教程
- 缓存API指南
- 通知API指南
- 深入IndexedDB
- Selectors API:querySelector和querySelectorAll
- 通过延迟和异步有效地加载JavaScript
- 文档对象模型(DOM)
- Web存储API:本地存储和会话存储
- 了解HTTP Cookies的工作原理
- 历史API
- WebP图像格式
- XMLHttpRequest(XHR)
- 深入的SVG教程
- 什么是数据网址
- 学习网络平台的路线图
- CORS,跨域资源共享
- 网络工作者
- requestAnimationFrame()指南
- 什么是Doctype
- 使用DevTools控制台和控制台API
- 语音合成API
- 如何在纯JavaScript中等待DOM ready事件
- 如何将类添加到DOM元素
- 如何遍历来自querySelectorAll的DOM元素
- 如何从DOM元素中删除类
- 如何检查DOM元素是否具有类
- 如何更改DOM节点值
- 如何将click事件添加到从querySelectorAll返回的DOM元素列表中
- WebRTC,实时Web API
- 如何在JavaScript中获取元素的滚动位置
- 如何替换DOM元素
- 如何只接受输入文件字段中的图像
- 为什么要使用浏览器的预览版?
- Blob对象
- 文件对象
- FileReader对象
- FileList对象
- ArrayBuffer
- ArrayBufferView
- URL对象
- 类型数组
- DataView对象
- BroadcastChannel API
- Streams API
- FormData对象
- 导航器对象
- 如何使用地理位置API
- 如何使用getUserMedia()
- 如何使用拖放API
- 如何在网页上滚动
- 在JavaScript中处理表单
- 键盘事件
- 鼠标事件
- 触摸事件
- 如何从DOM元素中删除所有子级
- 如何使用原始Javascript创建HTML属性
- 如何检查是否使用JavaScript选中了复选框?
- 如何使用JavaScript复制到剪贴板
- 如何使用JavaScript禁用按钮
- 如何在浏览器中使页面可编辑
- 如何使用URLSearchParams在JavaScript中获取查询字符串值
- 如何一次删除页面上的所有CSS
- 如何使用insertAdjacentHTML
- Safari,退出前警告
- 如何使用JavaScript将图像添加到DOM
- 如何重设表格
- 如何使用Google字体