十年专注于品牌网站建设 十年专注于品牌网站建设,低调、有情怀的网络应用服务商!
南昌百恒网络微信公众号 扫一扫关注
小程序
tel-icon全国服务热线:400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号
扫一扫打开百恒网络微信小程序

百恒网络

南昌百恒网络

javascript中鼠标按钮事件判断方法

百恒网络 2016-12-22 1012

只有在主鼠标按钮被单击(或键盘回车键被按下)时才会触发 click 事件,因此检测按钮的信息 并不是必要的。但对于 mousedown 和 mouseup 事件来说,则在其 event 对象存在一个 button 属性, 表示按下或释放的按钮。DOM的 button 属性可能有如下 3个值:0 表示主鼠标按钮,1 表示中间的鼠 标按钮(鼠标滚轮按钮) ,2 表示次鼠标按钮。在常规的设置中,主鼠标按钮就是鼠标左键,而次鼠标 按钮就是鼠标右键。
        IE8及之前版本也提供了 button 属性,但这个属性的值与 DOM的 button 属性有很大差异。
       0:表示没有按下按钮。 
       1:表示按下了主鼠标按钮。 
       2:表示按下了次鼠标按钮。 
       3:表示同时按下了主、次鼠标按钮。 
       4:表示按下了中间的鼠标按钮。 
       5:表示同时按下了主鼠标按钮和中间的鼠标按钮。 
       6:表示同时按下了次鼠标按钮和中间的鼠标按钮。 
       7:表示同时按下了三个鼠标按钮。 
       不难想见,DOM模型下的 button 属性比 IE模型下的 button 属性更简单也更为实用,之所以是这样,南昌网站制作公司百恒网络前端开发工程师告诉大家原因是同时按下多个鼠标按钮的情形十分罕见。常见的做法就是将 IE模型规范化为 DOM方式,毕竟除 IE8及更 早版本之外的其他浏览器都原生支持 DOM模型。而对主、中、次按钮的映射并不困难,只要将 IE的其 他选项分别转换成如同按下这三个按键中的一个即可(同时将主按钮作为优先选取的对象)。换句话说, IE中返回的 5 和 7 会被转换成 DOM模型中的 0。 
       由于单独使用能力检测无法确定差异(两种模型有同名的 button 属性),因此必须另辟蹊径。我 们知道,支持 DOM 版鼠标事件的浏览器可以通过 hasFearture()方法来检测,所以可以再为 EventUtil 对象添加如下 getButton()方法。 
var EventUtil = { 
//省略了其他代码 

getButton: function(event){
if (document.implementation.hasFeature("MouseEvents", "2.0")){
       return event.button;
} else {
       switch(event.button){
              case 0:
              case 1:
              case 3:
              case 5:
              case 7:
                     return 0;
              case 2:
              case 6:
                     return 2;
              case 4: return 1;
              }
       }
},
//省略了其他代码 
}; 
       通过检测"MouseEvents"这个特性,就可以确定 event 对象中存在的 button 属性中是否包含正 确的值。如果测试失败,说明是 IE,就必须对相应的值进行规范化。以下是使用该方法的示例。 

<script type="text/javascript">
var div = document.getElementById("myDiv");
EventUtil.addHandler(div, "mousedown", function(event){
       event = EventUtil.getEvent(event);
       alert(EventUtil.getButton(event)); 
});
</script>
       在这个例子中,我们为一个<div>元素添加了一个 onmousedown 事件处理程序。当在这个元素上 按下鼠标按钮时,会有警告框显示按钮的代码。
       在使用 onmouseup 事件处理程序时,button 的值表示释放的是哪个按钮。此 外,如果不是按下或释放了主鼠标按钮,Opera 不会触发 mouseup 或 mousedown 事件。 
  本文仅限内部技术人员学习交流,不得作于其他商业用途.希望此文对广大技人员有所帮助。原创文章出自:南昌网站建设公司-百恒网络http://www.jxbh.cn/如转载请注明出处!

400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号
扫一扫打开百恒网络小程序

欢迎您的光顾,我们将竭诚为您服务×

售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售后服务 售后服务
 
售后服务 售后服务
 
备案专线 备案专线
 
×