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

发布时间：2022/01/11 丨 文章来源：未知 丨 浏览次数：

只有在主鼠标按钮被单击（或键盘回车键被按下）时才会触发 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，就必须对相应的值进行规范化。以下是使用该方法的示例。?


? ? ? ?在这个例子中，我们为一个

PS：所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！