我们知道标准鼠标有左,中,右三个键。鼠标按下时如何判断按下的是哪个键呢?
W3C DOM-Level-2
定义如下
W3C DOM 写道
During mouse events caused by the depression or release of a mouse button, button is used to indicate which mouse button changed state. The values for button range from zero to indicate the left button of the mouse, one to indicate the middle button if present, and two to indicate the right button. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.
说的很明确,0,1,2分别代表左,中,右三个键。以下分别在mousedown,mouseup,click,dbclick中测试。
<p id="p1">Test mousedown</p>
<p id="p2">Test mouseup</p>
<p id="p3">Test click</p>
<p id="p4">Test dbclick</p>
<script type="text/javascript">
function $(id){return document.getElementById(id)}
var p1 = $('p1'), p2 = $('p2'), p3 = $('p3'), p4 = $('p4');
p1.onmousedown = function(e){
e = window.event || e;
alert(e.button);
}
p2.onmouseup = function(e){
e = window.event || e;
alert(e.button);
}
p3.onclick = function(e){
e = window.event || e;
alert(e.button);
}
p4.ondbclick = function(e){
e = window.event || e;
alert(e.button);
}
</script>
鼠标左键测试结果
|
IE6/7/8 |
IE9beta |
Firefox3.6 |
Chrome7 |
Safari5 |
Opera10 |
mousedown |
1 |
|
0 |
0 |
0 |
0 |
mouseup |
1 |
|
0 |
0 |
0 |
0 |
click |
0 |
|
0 |
0 |
0 |
0 |
dbclick |
error |
|
error |
error |
error |
error |
即:
IE6/7/8中,mousedown/mouseup 事件中获取左键的值为1,click事件中获取的却是0。
其它浏览器,mousedown/mouseup/click 事件中获取左键值均为0。完全遵循标准。
所有浏览器,dbclick事件中均无法获取
鼠标中键测试结果
|
IE6/7 |
IE8 |
IE9beta |
Firefox3.6 |
Chrome7 |
Safari5 |
Opera10 |
mousedown |
4 |
4 |
|
1 |
1 |
1 |
error |
mouseup |
4 |
4 |
|
1 |
1 |
1 |
error |
click |
error |
0 |
|
error |
1 |
1 |
error |
dbclick |
error |
|
|
error |
error |
error |
error
|
即:
IE6/7/8中,mousedown/mouseup 事件中获取中键的值为4。
IE6/7中,click事件无法获取中键的值。IE8则可以,但值为0。
Firefox3.6/Chrome7/Safari5中,mousedown/mouseup 事件中获取中键值为1。
Chrome7/Safar5中,click事件也能获取中键值,亦为1。
Opera10中无法获取中键值。
鼠标右键测试结果
|
IE6/7/8 |
IE9beta |
Firefox3.6 |
Chrome7 |
Safari5 |
Opera10 |
mousedown |
2 |
|
2 |
2 |
2 |
2 |
mouseup |
2 |
|
2 |
2 |
2 |
2 |
click |
error |
|
error |
error |
error |
error |
dbclick |
error |
|
error |
error |
error |
error |
即:
所有浏览器,mousedown/mouseup事件中均能获取右键值,且都为2.
所有浏览器,click/dbclick事件中均不能获取到右键值。
以上可看到,判断鼠标按下了哪个键
,应该选择合适的事件
。这里应选mousedown/mouseup。Opera10中仍然无法获取到中键的值,因为Opera压根不触发中键的事件(mousedown,mouseup,click,dbclick)。
以下代码将IE6/7/8的值转换成符合W3C标准的
var ie678 = function(ua){
function check(r){
return r.test(ua);
}
var isOpera = check(/opera/),
isIE = !isOpera && check(/msie/),
isIE6 = isIE && check(/msie 6/),
isIE7 = isIE && check(/msie 7/),
isIE8 = isIE && check(/msie 8/);
return isIE6 || isIE7 || isIE8;
}(navigator.userAgent.toLowerCase());
function getButton(e){
var code = e.button;
var ie678Map = {
1 : 0,
4 : 1,
2 : 2
}
if(ie678){
return ie678Map[code];
}
return code;
}
分享到:
相关推荐
### JavaScript 中各浏览器鼠标按键值差异详解 #### 一、引言 在Web开发中,处理用户交互是一项基本而重要的任务。其中,鼠标事件是非常常见的一类交互方式。不同的浏览器对于鼠标事件的处理存在一定的差异性,...
通过以上分析,可以得出结论,在实际应用中,当需要获取鼠标按键值时,应该使用mousedown和mouseup事件,并且要根据不同的浏览器环境做出相应的调整。同时,为了代码的健壮性,建议在多浏览器环境下对代码进行充分的...
标题中提到的“原生js实现跨浏览器获取鼠标按键的值”,主要涉及到JavaScript中如何通过不同的事件处理对象来获取鼠标按键信息,特别是考虑到不同浏览器间在实现上的差异。在W3C标准中,事件对象的button属性可以...
本文主要探讨了键盘和鼠标事件在IE和NETSCAPE中的处理,并分析了这两种浏览器在处理键盘和鼠标事件时的差异。通过本文,我们可以更好地理解JavaScript编程中的键盘和鼠标事件,并学会如何在IE和NETSCAPE中正确地处理...
在不同的浏览器中,获取鼠标位置的方法略有差异: - `e.pageX` 和 `e.pageY` 是W3C标准的事件对象属性,分别表示鼠标相对于文档左上角的水平和垂直距离。但在IE浏览器中,这两个属性可能不存在。 - 为了兼容IE,...
首先,要判断用户是否按下了回车键,可以通过在键盘按下事件(keydown)中检查事件对象的keyCode属性,或者在旧版的浏览器中使用which属性。现代浏览器一般都支持keyCode,但旧版的Internet Explorer浏览器并不支持...
在探讨使用jQuery来判断用户点击了鼠标哪个键时,我们需要了解几个关键的JavaScript和jQuery知识点:首先是事件对象(event)以及它的属性,其次是jQuery中处理鼠标和键盘事件的方式,以及各种浏览器对于事件属性的...
- IE中,可以使用`event.keyCode`获取键值。 - Mozilla则使用`event.which`。这两个属性在大多数情况下等效。 4. **鼠标位置**: - IE提供了`event.x`和`event.y`来获取鼠标点击的绝对位置。 - Mozilla则使用`...
在JavaScript中,对象可以被视为键值对的集合,类似于关联数组。在示例的HTML部分,有一个下拉列表供用户选择背景颜色,当用户选择一项并触发事件时,相关JavaScript函数可以根据下拉列表的选择来改变页面的背景色。...
事件对象包含了关于触发事件的信息,如鼠标的位置、键盘的键值等。获取事件对象的方法因浏览器而异。 ##### 4.1 IE 浏览器 ```javascript element.onclick = function() { var event = window.event; // 处理...
不同的浏览器对于获取按键码的方式可能存在差异,因此在实际应用中需要考虑到兼容性问题。上面的示例代码中,通过`theEvent.keyCode`、`theEvent.which`以及`theEvent.charCode`分别获取了不同浏览器环境下的按键码...
#### 鼠标事件的鼠标按键值(which/button) 对于鼠标事件,可以通过button属性来确定哪个鼠标按键被点击。button属性在不同浏览器有不同的值定义。W3C和微软的标准值不同,其中微软的标准提供了更直观的值,如左键...
本文主要探讨了如何解决JavaScript浏览器兼容教程中的事件处理问题,包括`window.event`、键盘值的取得、事件源的获取、事件监听以及鼠标位置的获取。 1. **window.event** 在IE中,事件对象`event`可以直接通过`...
此外,`e.which`和`event.keyCode`分别在Firefox和IE中用于获取按键值。Firefox还提供了`e.layerX`, `e.layerY`, `e.pageX`, `e.pageY`等属性,以获取更精确的鼠标位置信息。 3. 对象引用: 获取元素时,两者都...
由于不同的浏览器对事件的支持可能有所差异,我们还需要做一些兼容性处理: - 对于 IE 浏览器,可能需要使用 `event.srcElement` 而不是 `event.target` 来获取触发事件的目标元素。 - 在某些情况下,可能还需要...
实现跨浏览器兼容性的关键在于识别不同浏览器的差异,并在代码中进行适配。通常,这可以通过条件语句(如`if`、`else if`)来实现,根据浏览器特性选择不同的实现方式。在处理事件时,可以使用`try...catch`结构来...
这两个API允许在浏览器端存储键值对数据,即使关闭页面后仍能保留。 4. **动画框架**:尽管可以手动更新每一帧,但使用requestAnimationFrame()函数可以更流畅地实现游戏动画。这个API确保在下一次重绘之前调用回调...
7. 集合类型差异:List、Set、Map是Java集合框架中的三种主要类型。List是有序且可重复元素的集合,常见实现有ArrayList和LinkedList;Set是无序且不允许重复元素的集合,如HashSet和TreeSet;Map存储键值对,如...
- 在浏览器中,按ESC键可以停止加载当前页面,节省时间。 - 输入文字时,误操作或输入错误,按ESC键可以快速清除文本框内容。 - 使用`Ctrl+Shift+Esc`组合键可以迅速打开任务管理器,比使用`Ctrl+Alt+Del`更便捷。 -...