这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
我们知道标准鼠标有左,中,右三个键。鼠标按下时如何判断按下的是哪个键呢?
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 中,mousedown/mouseup 事件中获取左键的值为 1,click 事件中获取的却是 0。
其它浏览器,mousedown/mouseup/click 事件中获取左键值均为 0。完全遵循标准。
所有浏览器,dbclick 事件中均无法获取
即:
IE6/7/8 中,mousedown/mouseup 事件中获取中键的值为 4。
IE6/7 中,click 事件无法获取中键的值。IE8 则可以,但值为 0。
Firefox3.6/Chrome7/Safari5 中,mousedown/mouseup 事件中获取中键值为 1。
Chrome7/Safar5 中,click 事件也能获取中键值,亦为 1。
Opera10 中无法获取中键值。
即:
所有浏览器,mousedown/mouseup 事件中均能获取右键值,且都为 2。
所有浏览器,click/dbclick 事件中均不能获取到右键值。
以上可看到,判断鼠标按下了哪个键 ,应该选择合适的事件 。这里应选 mousedown/mouseup。Opera10 中仍然无法获取到中键的值,因为 Opera 压根不触发中键的事件 (mousedown,mouseup,click,dbclick)。
以下代码将 IE6/7/8 的值转换成符合 W3C 标准的
- var ie678 = !-[1,];
- function getButton(e){
- var code = e.button;
- var ie678Map = {
- 1 : 0,
- 4 : 1,
- 2 : 2
- }
- if(ie678){
- return ie678Map[code];
- }
- return code;
- }
(adsbygoogle = window.adsbygoogle || []).push({});
来源: http://www.phperz.com/article/17/0702/283237.html