JavaScript FAQ(十六)——鼠标事件(三)

简介:  十二、鼠标事件 5. Ctrl、Alt、Shift键(Ctrl, Alt, Shift Keys)Q:我如何检测和按下Ctrl、Alt和Shift键一起的鼠标事件?A:在当今的浏览器中,脚本可以检测鼠标事件发生时,用户是否按下了Ctrl、Alt或者Shift键中任何一个。

 十二、鼠标事件

 

5. Ctrl、Alt、Shift键(Ctrl, Alt, Shift Keys

Q:我如何检测和按下Ctrl、Alt和Shift键一起的鼠标事件?

A:在当今的浏览器中,脚本可以检测鼠标事件发生时,用户是否按下了Ctrl、Alt或者Shift键中任何一个。在下面的例子中,由MouseDownMouseUp事件完成演示。而至于其它鼠标事件,类似的方法可能达到效果,也可能达不到效果,这依赖于浏览器。

要实现Ctrl/Alt/Shift检测,你可以使用属性event.ctrlKeyevent.altKeyevent.shiftKey和不赞成使用的Navigator特有属性event.modifiers。在该页任何地方点击鼠标,同时按下Ctrl、Alt或者Shift,下面的脚本(在本页的<HEAD>区域)就会检测到这个组合(译者注:示例在本页上可能无法正常运行)。每次点击鼠标,你就会在浏览器的状态栏上看到event.ctrlKeyevent.altKeyevent.shiftKey或者event.modifiers

<script language="JavaScript"><!--
function mouseDown(e) {
 var ctrlPressed=0;
 var altPressed=0;
 var shiftPressed=0;

 if (parseInt(navigator.appVersion)>3) {

  var evt = navigator.appName=="Netscape" ? e:event;

  if (navigator.appName=="Netscape" && parseInt(navigator.appVersion)==4) {
   // NETSCAPE 4 CODE
   var mString =(e.modifiers+32).toString(2).substring(3,6);
   shiftPressed=(mString.charAt(0)=="1");
   ctrlPressed =(mString.charAt(1)=="1");
   altPressed  =(mString.charAt(2)=="1");
   self.status="modifiers="+e.modifiers+" ("+mString+")"
  }
  else {
   // NEWER BROWSERS [CROSS-PLATFORM]
   shiftPressed=evt.shiftKey;
   altPressed  =evt.altKey;
   ctrlPressed =evt.ctrlKey;
   self.status=""
    +  "shiftKey="+shiftPressed 
    +", altKey="  +altPressed 
    +", ctrlKey=" +ctrlPressed 
  }
  if (shiftPressed || altPressed || ctrlPressed) 
   alert ("Mouse clicked with the following keys:/n"
    + (shiftPressed ? "Shift ":"")
    + (altPressed   ? "Alt "  :"")
    + (ctrlPressed  ? "Ctrl " :"")
   )
 }
 return true;
}
if (parseInt(navigator.appVersion)>3) {
 document.onmousedown = mouseDown;
 if (navigator.appName=="Netscape") 
  document.captureEvents(Event.MOUSEDOWN);
}
// --></script>

event.ctrlKeyevent.altKeyevent.shiftKey的意义是一目了然的。如果相应的键被按下它们的值为 true,反之为 false。Netscape 4属性 event.modifiers稍微有点技巧。根据实际的键组合,这个属性的值主要有:

Alt only              modifiers=1 (001)
Ctrl only             modifiers=2 (010)
Ctrl+Alt              modifiers=3 (011)
Shift only            modifiers=4 (100)
Shift+Alt             modifiers=5 (101)
Shift+Ctrl            modifiers=6 (110)
Shift+Alt+Ctrl        modifiers=7 (111)
None of these keys    modifiers=0 (000)

 

因此,event.modifiers的二进制值表示:

  • 最小(右侧)的一位是1表示Alt被按下
  • 第二位是1表示Ctrl被按下
  • 第三位是1表示Shift被按下

 

 6. 禁止Shift-鼠标点击(Shift-click: Disabling

Q:我可以禁止浏览器对Shift-鼠标点击的默认响应?

A:在Netscape Navigator 4或者Internet Explorer 4或者更新的浏览器中,你可以区分Shift-鼠标点击和普通的鼠标点击,并且禁止对Shift-鼠标点击的默认响应。例如,在这个页面Shift-鼠标已经被禁止。如果你在Windows中使用版本4(或者更新)的浏览器,你可以在任何超链接上进行测试!(在旧版的浏览器中,仍然会有默认的响应。)

要禁止Shift-鼠标点击,把下面的代码插入页面的<HEAD>区域:

 

<script language="JavaScript">
<!--
function mouseDown(e) {
 var shiftPressed=0;
 if (parseInt(navigator.appVersion)>3) {
  if (navigator.appName=="Netscape")
       shiftPressed=(e.modifiers-0>3);
  else shiftPressed=event.shiftKey;
  if (shiftPressed) {
   alert ('Shift-click is disabled.')
   return false;
  }
 }
 return true;
}
if (parseInt(navigator.appVersion)>3) {
 document.onmousedown = mouseDown;
 if (navigator.appName=="Netscape") 
  document.captureEvents(Event.MOUSEDOWN);
}
//-->
<script>

目录
相关文章
|
3月前
|
JavaScript
鼠标事件(点击换色)分别使用js和jQuery代码实现
鼠标事件(点击换色)分别使用js和jQuery代码实现
42 1
|
2月前
|
存储 前端开发 JavaScript
前端基础(二)_JavaScript变量、JavaScript标识符、JavaScript获取元素、JavaScript的鼠标事件
本文介绍了JavaScript变量的声明和使用、标识符的命名规则、如何获取和操作HTML元素,以及JavaScript的鼠标事件处理,通过示例代码展示了这些基础知识点在实际开发中的应用。
43 2
前端基础(二)_JavaScript变量、JavaScript标识符、JavaScript获取元素、JavaScript的鼠标事件
|
4月前
|
JavaScript
js【图解】滚动条的位置(文档与屏幕间的距离),鼠标事件距离(位置),元素距离(位置)
js【图解】滚动条的位置(文档与屏幕间的距离),鼠标事件距离(位置),元素距离(位置)
107 7
|
6月前
|
前端开发 JavaScript
CSS+JS鼠标事件触发鼠标模形实现手状
CSS+JS鼠标事件触发鼠标模形实现手状
|
6月前
|
JavaScript 前端开发
js基础——事件(鼠标事件、键盘事件、表单事件......)
js基础——事件(鼠标事件、键盘事件、表单事件......)
58 0
|
JavaScript 前端开发
JS javascript 点击鼠标 鼠标事件 获取元素 获取元素Xpath
JS javascript 点击鼠标 鼠标事件 获取元素 获取元素Xpath
172 0
js鼠标事件对象
event对象代表事件的状态,跟事件相关的一系列信息的集合。
|
JavaScript 程序员
【JavaScript-事件】target和this的区别?如何阻止冒泡事件?常见的鼠标事件和键盘事件有哪些?
【JavaScript-事件】target和this的区别?如何阻止冒泡事件?常见的鼠标事件和键盘事件有哪些?
160 0
【JavaScript-事件】target和this的区别?如何阻止冒泡事件?常见的鼠标事件和键盘事件有哪些?
|
JavaScript 容器
js鼠标事件大全
js鼠标事件大全
117 0