十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
这篇“javascript中鼠标按钮事件判断怎么实现”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“javascript中鼠标按钮事件判断怎么实现”文章吧。
创新互联建站主营安仁网站建设的网络公司,主营网站建设方案,app软件定制开发,安仁h5微信平台小程序开发搭建,安仁网站营销推广欢迎安仁等地区企业咨询
只有在主鼠标按钮被单击(或键盘回车键被按下)时才会触发 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,就必须对相应的值进行规范化。以下是使用该方法的示例。
在这个例子中,我们为一个
以上就是关于“javascript中鼠标按钮事件判断怎么实现”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注创新互联行业资讯频道。