`
zhouyrt
  • 浏览: 1159014 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

各浏览器中鼠标按键值的差异

阅读更多

我们知道标准鼠标有左,中,右三个键。鼠标按下时如何判断按下的是哪个键呢?

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;
}

 

 

 

分享到:
评论
5 楼 cuixiping 2010-12-09  
还有左右齐按呢?左右依次按下,或者依次松开呢?估计也会有些差异。
很久以前做扫雷的时候碰到过,某些浏览器,按下第一个,再按第二个,再一起松开,发现只有一个mouseup冒出来,郁闷。
4 楼 Andrew1945 2010-12-05  
有没有人知道按键在不同浏览器的差异呢!
3 楼 softor 2010-12-02  
个性的浏览器……
2 楼 pfans 2010-11-28  
测试了下,Opera中中键果然不能触发事件(mousedown,mouseup,click,dbclick)。中键点击会出现十字方向图标。Opera得给力!
1 楼 lixinlixin2008 2010-11-27  
opera要给力给力给力~~~

相关推荐

    js中各浏览器中鼠标按键值的差异.docx

    ### JavaScript 中各浏览器鼠标按键值差异详解 #### 一、引言 在Web开发中,处理用户交互是一项基本而重要的任务。其中,鼠标事件是非常常见的一类交互方式。不同的浏览器对于鼠标事件的处理存在一定的差异性,...

    js中各浏览器中鼠标按键值的差异

    通过以上分析,可以得出结论,在实际应用中,当需要获取鼠标按键值时,应该使用mousedown和mouseup事件,并且要根据不同的浏览器环境做出相应的调整。同时,为了代码的健壮性,建议在多浏览器环境下对代码进行充分的...

    原生js实现跨浏览器获取鼠标按键的值

    标题中提到的“原生js实现跨浏览器获取鼠标按键的值”,主要涉及到JavaScript中如何通过不同的事件处理对象来获取鼠标按键信息,特别是考虑到不同浏览器间在实现上的差异。在W3C标准中,事件对象的button属性可以...

    键盘和鼠标事件在IE和NETSCAPE中的处理.pdf

    本文主要探讨了键盘和鼠标事件在IE和NETSCAPE中的处理,并分析了这两种浏览器在处理键盘和鼠标事件时的差异。通过本文,我们可以更好地理解JavaScript编程中的键盘和鼠标事件,并学会如何在IE和NETSCAPE中正确地处理...

    JS获取鼠标位置距浏览器窗口距离的方法示例

    在不同的浏览器中,获取鼠标位置的方法略有差异: - `e.pageX` 和 `e.pageY` 是W3C标准的事件对象属性,分别表示鼠标相对于文档左上角的水平和垂直距离。但在IE浏览器中,这两个属性可能不存在。 - 为了兼容IE,...

    javascript判断是否按回车键并解决浏览器之间的差异

    首先,要判断用户是否按下了回车键,可以通过在键盘按下事件(keydown)中检查事件对象的keyCode属性,或者在旧版的浏览器中使用which属性。现代浏览器一般都支持keyCode,但旧版的Internet Explorer浏览器并不支持...

    读jQuery之七 判断点击了鼠标哪个键的代码

    在探讨使用jQuery来判断用户点击了鼠标哪个键时,我们需要了解几个关键的JavaScript和jQuery知识点:首先是事件对象(event)以及它的属性,其次是jQuery中处理鼠标和键盘事件的方式,以及各种浏览器对于事件属性的...

    IE和Mozilla中脚本兼容性汇总

    - IE中,可以使用`event.keyCode`获取键值。 - Mozilla则使用`event.which`。这两个属性在大多数情况下等效。 4. **鼠标位置**: - IE提供了`event.x`和`event.y`来获取鼠标点击的绝对位置。 - Mozilla则使用`...

    javascript例子教程20210614借鉴.pdf

    在JavaScript中,对象可以被视为键值对的集合,类似于关联数组。在示例的HTML部分,有一个下拉列表供用户选择背景颜色,当用户选择一项并触发事件时,相关JavaScript函数可以根据下拉列表的选择来改变页面的背景色。...

    javascript大事处理模型实例说明_.docx

    事件对象包含了关于触发事件的信息,如鼠标的位置、键盘的键值等。获取事件对象的方法因浏览器而异。 ##### 4.1 IE 浏览器 ```javascript element.onclick = function() { var event = window.event; // 处理...

    js回车事件绑定.txt

    不同的浏览器对于获取按键码的方式可能存在差异,因此在实际应用中需要考虑到兼容性问题。上面的示例代码中,通过`theEvent.keyCode`、`theEvent.which`以及`theEvent.charCode`分别获取了不同浏览器环境下的按键码...

    JavaScript Event学习第七章 事件属性

    #### 鼠标事件的鼠标按键值(which/button) 对于鼠标事件,可以通过button属性来确定哪个鼠标按键被点击。button属性在不同浏览器有不同的值定义。W3C和微软的标准值不同,其中微软的标准提供了更直观的值,如左键...

    javascript浏览器兼容教程之事件处理

    本文主要探讨了如何解决JavaScript浏览器兼容教程中的事件处理问题,包括`window.event`、键盘值的取得、事件源的获取、事件监听以及鼠标位置的获取。 1. **window.event** 在IE中,事件对象`event`可以直接通过`...

    IE与firefox下Dhtml的一些区别小结

    此外,`e.which`和`event.keyCode`分别在Firefox和IE中用于获取按键值。Firefox还提供了`e.layerX`, `e.layerY`, `e.pageX`, `e.pageY`等属性,以获取更精确的鼠标位置信息。 3. 对象引用: 获取元素时,两者都...

    javascript实现鼠标选取拖动或Ctrl选取拖动

    由于不同的浏览器对事件的支持可能有所差异,我们还需要做一些兼容性处理: - 对于 IE 浏览器,可能需要使用 `event.srcElement` 而不是 `event.target` 来获取触发事件的目标元素。 - 在某些情况下,可能还需要...

    IE和Mozilla的兼容性汇总event

    实现跨浏览器兼容性的关键在于识别不同浏览器的差异,并在代码中进行适配。通常,这可以通过条件语句(如`if`、`else if`)来实现,根据浏览器特性选择不同的实现方式。在处理事件时,可以使用`try...catch`结构来...

    青蛙跳HTML5游戏源码

    这两个API允许在浏览器端存储键值对数据,即使关闭页面后仍能保留。 4. **动画框架**:尽管可以手动更新每一帧,但使用requestAnimationFrame()函数可以更流畅地实现游戏动画。这个API确保在下一次重绘之前调用回调...

    2021-2022计算机二级等级考试试题及答案No.5553.docx

    7. 集合类型差异:List、Set、Map是Java集合框架中的三种主要类型。List是有序且可重复元素的集合,常见实现有ArrayList和LinkedList;Set是无序且不允许重复元素的集合,如HashSet和TreeSet;Map存储键值对,如...

    实用的电脑技巧

    - 在浏览器中,按ESC键可以停止加载当前页面,节省时间。 - 输入文字时,误操作或输入错误,按ESC键可以快速清除文本框内容。 - 使用`Ctrl+Shift+Esc`组合键可以迅速打开任务管理器,比使用`Ctrl+Alt+Del`更便捷。 -...

Global site tag (gtag.js) - Google Analytics