JS中鼠标左右键以及中键的事件
在三维场景中有时候需要判断鼠标的事件,除了使用的click事件,只有鼠标左键有效,而右键无效。而对于onmousedown、onmouseup的时候鼠标的事件左键/右键有效。详细请看w3c上的资料。
以下总结鼠标三个按键操作:
首先,需要为window绑定mousedown、mouseup事件
元素对象.addEventListener('mousedown', 处理函数fun);
1
然后,判断button的值,button 事件属性可返回一个整数,指示当事件被触发时哪个鼠标按键被点击。
button: 返回当事件被触发时,哪个鼠标按钮被点击。
| 参数 | 描述 |
| 0 | 规定鼠标左键 |
| 1 | 规定鼠标中键 |
| 2 | 规定鼠标右键 |
function onMouseDown(event){
if (event.button == 0) {
console.log("鼠标左键!")
}else if (event.button == 2){
console.log("鼠标右键!");
}else if(event.button == 1){
console.log("鼠标滚轮!");
}
}
w3c下的示例
<body onmousedown="whichButton(event)">
<p>请在文档中点击鼠标。一个消息框会提示出您点击了哪个鼠标按键。</p>
<script type="text/javascript">
function whichButton(event){
var btnNum = event.button;
if (btnNum==2){
alert("您点击了鼠标右键!")
}else if(btnNum==0){
alert("您点击了鼠标左键!")
}else if(btnNum==1){
alert("您点击了鼠标中键!");
}else{
alert("您点击了" + btnNum+ "号键,我不能确定它的名称。");
}
}
</script>
</body>
原文:https://blog.csdn.net/ithanmang/article/details/81561363
JS中鼠标左右键以及中键的事件的更多相关文章
- 转---JS 获取鼠标左右键
原文:http://blog.csdn.net/mine3333/article/details/7291557 function test() { alert(event.x+" &quo ...
- 【新特性速递】单元格导航(上下左右键,TAB键和ENTER键)
上下左右按键 其实单元格导航(上下左右按键,需要启用表格的ShowSelectedCell属性)一直都存在,只不过之前的版本(v5.5.0)有一些小的BUG. BUG1 比如锁定列存在时,上下左右键只 ...
- JS获取鼠标左(右)滑事件
鼠标左(右)滑也是网站开发中常见的效果之一,这里对鼠标左(右)滑做出一些解释. 首先要获取需要左右滑事件的节点: eg: var div=document.getElementById("d ...
- unity中鼠标左键控制摄像机视角上下左右移动
enum RotationAxes { MouseXAndY, MouseX, MouseY } RotationAxes axes = RotationAxes.MouseXAndY; //@Hid ...
- Python3 tkinter基础 Frame event.x 输出鼠标左右键点击的位置
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...
- 百度地图Api进阶教程-地图鼠标左右键操作实例和鼠标样式6.html
<!DOCTYPE html> <html> <head> <meta name="viewport" content="ini ...
- 【转】 js怎么区分出点击的是鼠标左键还是右键?
IE 下 onMouseDown 事件有个 events.button 可以返回一个数值,根据数值判断取得用户按了那个鼠标键 events.button==0 默认.没有按任何按钮. events. ...
- JavaScript经典代码【二】【javascript判断用户点了鼠标左键还是右键】
IE 下 onMouseDown 事件有个 events.button 可以返回一个数值,根据数值判断取得用户按了那个鼠标键 events.button==0 默认.没有按任何按钮. events.b ...
- zend studio中ctrl+鼠标左键无法转到类或函数定义文件的解决方法
转载自:http://blog.csdn.net/wide288/article/details/21622183 zend studio中ctrl+鼠标左键无法转到类或函数定义文件的解决方法: ze ...
随机推荐
- idea下载
- 数据库 | 远程连接centos7上数据库
用root身份进入远程服务器控制台: 进入Mysql命令: # mysql -uroot -p 或者在本地上连接到远程主机上的MySQL: 假设远程主机的IP为:10.0.0.1,用户名为root,密 ...
- Day1课后作业:用户登录简单版
user = "gaojun"password ="123abc"for i in range(3): user = input('请输入用户名:') pass ...
- HDU1087(树状数组求LIS)
题是水题,学习一下用树状数组求LIS. 先离散化一下,注意去重:然后就把a[i]作为下标,dp[i]作为值,max作为维护的运算插进树状数组即可. 如果是上升子序列,询问(a[i] - 1):如果是不 ...
- 如何在Linux上升级java
首先使用rpm -qa|grep gcj命令查找安装信息 卸载老版java: rpm -e <检索到软件名> 下载最新java JDK: 自行到oracle官网下载相应的版本,放到linu ...
- 74HC14D(6反向施密特触发器)
74HC14D:6反向施密特触发器:延迟特性,反向特性,整形特点. 施密特触发器是具有特殊功能的非门,当加在它的输入端A的电压逐渐上升到某个值时(正阈值电压),输出端Y会突然从高电平跳到低电平,而当输 ...
- No bean named 'springSecurityFilterChain' is defined
1.问题 本文讨论Spring安全配置问题 - 应用程序引导过程抛出以下异常: SEVERE: Exception starting filter springSecurityFilterChain ...
- 深度学习中GPU和显存分析
刚入门深度学习时,没有显存的概念,后来在实验中才渐渐建立了这个意识. 下面这篇文章很好的对GPU和显存总结了一番,于是我转载了过来. 作者:陈云 链接:https://zhuanlan.zhihu. ...
- php pack、unpack、ord 函数使用方法(二进制流接口应用实例)
在工作中,我也逐渐了解到pack,unpack,ord对于二进制字节处理的强大. 下面我逐一介绍它们.在我们工作中,用到它们的估计不多. 我在最近一个工作中,因为通讯需要用到二进制流,然后接口用php ...
- CodeSmith Generator 7.0.2
[工具]CodeSmith Generator 7.0.2激活步骤 只看楼主 收藏 回复 M炎骫毒逆天T c#攻城狮 8 学过三层的人应该认识CodeSmith Generator吧, ...