笔记:JS键盘和鼠标的事件

 今天做的小东东,要在弹出层加个事件来关闭。先想到按ESC关闭

根据转帖来的js键盘事件代码,先得到onkeydown的事件代码,然后执行.

ESC事件的代码为0X1B,十进制表示就为27

  1.             Obj.onkeydown = function(){
  2.                 var VObj = window.event;
  3.                 if (VObj.keyCode == 27) {
  4.                     //do someting
  5.                     //closeWindow();
  6.                 }
  7.             }

2。鼠标右键

后来又想到用鼠标右键来操作,起初想onmousedown,不敢确定是否用该事件处理。GOOGLE一下

以下是转帖:

在javascript里面如何检测右键事件,并且屏蔽原来的右键菜单,上网查找一翻之后发现一些比较简单的方法。
如设置onmousedown,检查其event.button的值是不是2(代表右键)。
这个方法在FF和IE中都可用,但是在Maxthon中event.button却是0,这让我有点困惑,Maxthon不是IE内核的吗?
我只能设想Maxthon这个壳是做过手脚的。然而如果设置onmouseup,其event.button值就是2了。
所以如果检测右键的话,是设置其onmouseup即可。

document.getElementById("test").οnmοuseup=function(oEvent) {
    if (!oEvent) oEvent=window.event;
    if (oEvent.button==2) {
        //-- do something for user right click
        // alert("Mouse up");
    }
}

但是如果还需要屏蔽右键的话,还是用oncontextmenu比较简单,但这时就不是检测右键,而是检测是否弹出上下文菜单。
屏蔽的方法跟屏蔽其他默认行为的方法是一样的,一般来说都是有效的,不过因为某些浏览器有禁止禁止弹出右键菜单的功能,所以如果需要在用户点击右键时做点事情,最好还是不要放在oncontextmenu中,而是放在onmouseup中并检测右键,附加oncontextmenu来屏蔽原来的菜单。

document.getElementById("test").οncοntextmenu=function(event) {
    //-- do something here
    // alert("ContextMenu Popup");
    //-- prevent the default behavior
    if (document.all) window.event.returnValue = false;// for IE
    else event.preventDefault();
};

通过一些简单的测试,可以发现在FF和在IE存在着有趣的区别。
在onmouseup和oncontextmenu事件处理中都使用alert,可以看出来是先执行onmouseup事件再到oncontextmenu的,在IE中,两者会非常连贯的在一起执行,(均认为是发生在test元素上的事件),而在FF里面则不是(前提是test元素所占区域比较小,当alert弹出时需要移动鼠标才能点击'OK'的情况下),它会先执行onmouseup,alert出来之后,移动鼠标点击'OK',这时还是会弹出菜单的,但是如果不移开鼠标,而是直接按Enter确认的话,这时它就会认为是在test元素上触发的事件了。可以理解为是IE 和 Firefox中的事件机制的细节区别。当然我们很少会应用到连续事件的,就无须注意到这点区别了,把需要的事件处理完整的写在一个处理方法里面就是最简单有效的解决方案了。

最终代码就为:

  1. Obj.onmouseup = function(){
  2.     var Ov = window.event;
  3.     if (Ov.button == 2) {
  4.         //to do someting
  5.     }
  6. }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值