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 ...
随机推荐
- [Xcode 实际操作]九、实用进阶-(31)为IAP(支付方式)内购功能的具体实现和测试
目录:[Swift]Xcode实际操作 本文将演示如何为IAP(支付方式)内购功能的具体实现和测试. 内购是苹果市场上的一种常见的盈利方式. 在项目中确保已经安装了第三方库[Pod],双击[Podfi ...
- 51Nod 1043 幸运号码
#include <stdio.h> #include <algorithm> using namespace std; typedef long long ll; ; ][] ...
- iOS开发 - 多线程实现方案之GCD篇
GCD概念 GCD为Grand Central Dispatch的缩写,纯c语言编写,是Apple开发的一个多核编程的较新的解决方法.它主要用于优化应用程序以支持多核处理器以及其他对称多处理系统.它是 ...
- localStorage和sessionStorage使用
localStorage.setItem("key","value");//存数据 localStorage.getItem("key"); ...
- [题解]（堆）luogu_P1631序列合并
思路来自题解 作者: Red_w1nE 更新时间: 2016-11-13 20:46 在Ta的博客查看 72 最近有点忙 没时间贴代码了== [分析] 首先,把A和B两个序列分别从小到大排序,变成两 ...
- TCP长链接调试利器nc
最近做了不少TCP长链接的开发,包括服务端和客户端.本人感觉服务器端与客户端通信时最好采用字符串形式,这样可以做要平台无关,跨语言.如果采用对象序列化机制通用性会较差.另外采用字符串形式用nc调试很方 ...
- css未知宽度水平居中整理
1.text-align 兼容性很好 .wp {text-align: center;} .test {display: inline;} <ul class="wp"> ...
- spring boot使用AbstractXlsView导出excel
一.maven依赖jar包 <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi ...
- 基于Matlab的标记分水岭分割算法
转自:http://blog.sina.com.cn/lyqmath 1 综述 Separating touching objects in an image is one of the more d ...
- jruby+watir-webdriver+cucumber自动化测试环境配置
1.安装java运行时环境,且配置环境变量 2.安装jruby环境,建议选择安装1.6.8或1.6.7版本的 3.安装需要的gem包 gem install activerecord -v='3.0. ...