关于界面的mousedown、mouseup、click事件
三个事件的触发时机
1.mousedown
当鼠标指针移动到元素上方,并按下鼠标按键(左、右键均可)时,会发生 mousedown 事件。
与 click 事件不同,mousedown 事件仅需要按键被按下,而不需要松开即可发生。
2.mouseup
当在元素上松开鼠标按键(左、右键均可)时,会发生 mouseup 事件。
与 click 事件不同,mouseup 事件仅需要松开按钮。当鼠标指针位于元素上方时,放松鼠标按钮就会触发该事件。
3.click
当鼠标指针停留在元素上方,然后按下并松开鼠标左键时,就会发生一次 click 事件。
注意:触发click事件的条件是按下并松开鼠标左键!,按下并松开鼠标右键并不会触发click事件。
三个事件的触发顺序
若在同一个元素上按下并松开鼠标左键,会依次触发mousedown、mouseup、click,前一个事件执行完毕才会执行下一个事件
若在同一个元素上按下并松开鼠标右键,会依次触发mousedown、mouseup,前一个事件执行完毕才会执行下一个事件,不会触发click事件
关于界面的mousedown、mouseup、click事件相关推荐
- mousedown mouseup click 触发顺序
mousedown.mouseup.click执行顺序是从左到右的,更重要的是一旦mousedown事件激活,正常情况下后面两个事件也肯定会被激活 mousemove 事件在是一直在元素上运行的(如果 ...
- mousedown mousemove mouseup 与 click事件冲突的解决办法
使用css样式pointer-events解决 需要用到mousedown mousemove mouseup的时候一般都是在拖拽事件中,但是click的触发条件就是mousedown+mouseup ...
- Vue input的blur事件影响下拉框中点击事件的解决方案 用mousedown/mousedown替代click
最近遇到一个需求,输入框输入关键词,要出一个带输入建议的弹框,类似于ElementUI自带的<el-autocomplete>,只是需求中的弹框底部有个分页功能,因此用不了自带的<e ...
- js区分click事件和mousedown、单击和双击事件
一.点击和拖动 1.问题 对于同一个对象进行的操作涉及点击(click)和拖动(mousedown,mousemove,mouseup),而拖动中又会触发一次点击事件 2.解决:设置全局变量判断点击之 ...
- JavaScript区分click事件和mousedown(mouseup、mousemove)方法
在前端开发工作中,会遇到这样问题:针对同一个dom元素,即希望为它绑定click事件,又想该元素可以允许拖拽的效果.而使用拖拽的效果,我们一般就会用到mousedown,mousemove和mouse ...
- mousedown、mouseup、click事件之间的关系及执行顺序
三个事件的触发时机 mousedown 当鼠标指针移动到元素上方,并按下鼠标按键(左.右键均可)时,会发生 mousedown 事件. 与 click 事件不同,mousedown 事件仅需要按键被按 ...
- click事件在什么时候出发_超全的js事件机制amp;事件委托
超全的js事件机制&事件委托,想要理解js事件只需认真看完此篇即可~ 目录结构: 什么是事件机制 事件冒泡事件捕获 DOM事件流事件委托 误区 在同一个对象上注册事件,并不一定按照注册顺序执行 ...
- 踩坑 - click事件与blur事件冲突问题 input文件上传同名文件问题
前言 上周写需求遇到了一点小坑涉及到一些小细节,今天赶上没啥事总结一下分享出来. click事件与blur事件冲突问题 click事件与blur事件 blur事件: 表单事件,元素失去焦点时候触发,不 ...
- el-table click事件多次触发_JavaScript从零开始——DOM事件编程(1)
事件的本质是程序各个组成部分之间的一种通信方式,也是异步编程的一种实现.DOM 支持大量的事件,本章开始,我们一起看看 DOM 的事件编程. 1 概念 DOM 的事件操作(监听和触发),都定义在Eve ...
最新文章
- 600分钟搞定Python入门到实战
- pycharm 如何搜索?Ctrl+N 搜索py文件 Ctrl+shift+N 搜索所有类型的文件 ctrl+shift+f 全局字符串搜索 ctrl+shift+a 配置项搜索 双shift全局
- rust怎么不要的墙拆掉_封阳台,栏杆要不要拆掉?栏杆装在玻璃窗里面还是外面...
- AFNetworking网络请求与图片上传工具(POST)
- Selenium Web 自动化 - 项目实战(三)
- python实现两个文件夹中同名文件转移
- Spring Boot Framework的关键组件和内部构造(自动装配、起步依赖、CLI、Actuator)
- 云服务器支持javascript,云服务器支持javascript
- “我把技术负债玩成了俄罗斯方块,却永远赢不了!”
- 局域网组网 | 交换机常用命令
- python统计字符串字母个数_python如何统计字符串中字母个数?_后端开发
- 利用PPT制作不一样的动态文字技巧
- 如何用python爬取股票数据选股_用python爬取股票数据
- 一份超详细的IBM公司JAVA基础面试题附答案以及解析(题库)
- 《黑客与画家》读书笔记(四)
- Android开发学习笔记
- HJ卫星数据的下载与打开
- 10分钟,学会从上帝视角看产品数据
- linux安装福昕PDF阅读器
- 企业经营(数据)分析