js中各瀏覽器中鼠標(biāo)按鍵值的差異
W3C DOM 寫道
During mouse events caused by the depression or release of a mouse button, button is used to indicate which mouse button changed state. The values for button range from zero to indicate the left button of the mouse, one to indicate the middle button if present, and two to indicate the right button. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.
其描述的很明確,0,1,2分別代表左,中,右三個(gè)鍵。以下分別在mousedown,mouseup,click,dbclick中測(cè)試。
<p id="p1">Test mousedown</p>
<p id="p2">Test mouseup</p>
<p id="p3">Test click</p>
<p id="p4">Test dbclick</p>
<script type="text/javascript">
function $(id){return document.getElementById(id)}
var p1 = $('p1'), p2 = $('p2'), p3 = $('p3'), p4 = $('p4');
p1.onmousedown = function(e){
e = window.event || e;
alert(e.button);
}
p2.onmouseup = function(e){
e = window.event || e;
alert(e.button);
}
p3.onclick = function(e){
e = window.event || e;
alert(e.button);
}
p4.ondbclick = function(e){
e = window.event || e;
alert(e.button);
}
</script>
即:
IE6/7/8中,mousedown/mouseup 事件中獲取左鍵的值為1,click事件中獲取的卻是0。
其它瀏覽器,mousedown/mouseup/click 事件中獲取左鍵值均為0。完全遵循標(biāo)準(zhǔn)。
所有瀏覽器,dbclick事件中均無(wú)法獲取
即:
IE6/7/8中,mousedown/mouseup 事件中獲取中鍵的值為4。
IE6/7中,click事件無(wú)法獲取中鍵的值。IE8則可以,但值為0。
Firefox3.6/Chrome7/Safari5中,mousedown/mouseup 事件中獲取中鍵值為1。
Chrome7/Safar5中,click事件也能獲取中鍵值,亦為1。
Opera10中無(wú)法獲取中鍵值。
即:
所有瀏覽器,mousedown/mouseup事件中均能獲取右鍵值,且都為2。
所有瀏覽器,click/dbclick事件中均不能獲取到右鍵值。
以上可看到,判斷鼠標(biāo)按下了哪個(gè)鍵 ,應(yīng)該選擇合適的事件 。這里應(yīng)選mousedown/mouseup。Opera10中仍然無(wú)法獲取到中鍵的值,因?yàn)镺pera壓根不觸發(fā)中鍵的事件(mousedown,mouseup,click,dbclick)。
以下代碼將IE6/7/8的值轉(zhuǎn)換成符合W3C標(biāo)準(zhǔn)的
var ie678 = !-[1,];
function getButton(e){
var code = e.button;
var ie678Map = {
1 : 0,
4 : 1,
2 : 2
}
if(ie678){
return ie678Map[code];
}
return code;
}
- js獲取及判斷鍵盤按鍵的方法
- JS實(shí)現(xiàn)獲取鍵盤按下的按鍵并顯示在頁(yè)面上的方法
- JavaScript onkeypress事件入門實(shí)例(按下或按住一個(gè)鍵盤按鍵)
- JavaScript onkeydown事件入門實(shí)例(鍵盤某個(gè)按鍵被按下)
- js在輸入框屏蔽按鍵,只能鍵入數(shù)字的示例代碼
- JS獲取鍵盤上任意按鍵的值(實(shí)例代碼)
- js獲取鍵盤按鍵響應(yīng)事件(兼容各瀏覽器)
- Javascript 檢測(cè)鍵盤按鍵信息及鍵碼值對(duì)應(yīng)介紹
- 按鍵盤方向鍵翻頁(yè)跳轉(zhuǎn)的javascript代碼(支持ie,firefox)
- JavaScript 監(jiān)聽(tīng)textarea中按鍵事件
- JS判斷是否長(zhǎng)按某一鍵的方法
相關(guān)文章
詳解JavaScript時(shí)間處理之幾個(gè)月前或幾個(gè)月后的指定日期
本篇文章主要介紹了JavaScript時(shí)間處理之幾個(gè)月前或幾個(gè)月后的指定日期 ,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2016-12-12微信小程序?qū)崿F(xiàn)消息框彈出動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)消息框彈出動(dòng)畫,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-06-06JavaScript獲取當(dāng)前網(wǎng)頁(yè)標(biāo)題(title)的方法
這篇文章主要介紹了JavaScript獲取當(dāng)前網(wǎng)頁(yè)標(biāo)題(title)的方法,涉及javascript中document.title方法的使用,需要的朋友可以參考下2015-04-04Next.js解決axios獲取真實(shí)ip問(wèn)題方法分析
這篇文章主要介紹了Next.js解決axios獲取真實(shí)ip問(wèn)題方法分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09javascript彈性運(yùn)動(dòng)效果簡(jiǎn)單實(shí)現(xiàn)方法
這篇文章主要介紹了javascript彈性運(yùn)動(dòng)效果簡(jiǎn)單實(shí)現(xiàn)方法,實(shí)例分析了JavaScript實(shí)現(xiàn)彈性運(yùn)動(dòng)的原理,涉及JavaScript數(shù)學(xué)運(yùn)算與時(shí)間函數(shù)的相關(guān)使用技巧,需要的朋友可以參考下2016-01-01如何在CocosCreator里畫個(gè)炫酷的雷達(dá)圖
這篇文章主要介紹了如何在CocosCreator里畫個(gè)炫酷的雷達(dá)圖,對(duì)Graphics感興趣的同學(xué),一定要看看,并且把代碼實(shí)踐一下2021-04-04JavaScript直接調(diào)用函數(shù)與call調(diào)用的區(qū)別實(shí)例分析
這篇文章主要介紹了JavaScript直接調(diào)用函數(shù)與call調(diào)用的區(qū)別,結(jié)合額實(shí)例形式分析了JavaScript直接調(diào)用函數(shù)與call調(diào)用的基本用法、區(qū)別及相關(guān)注意事項(xiàng),需要的朋友可以參考下2020-05-05JS簡(jiǎn)單判斷滾動(dòng)條的滾動(dòng)方向?qū)崿F(xiàn)方法
這篇文章主要介紹了JS簡(jiǎn)單判斷滾動(dòng)條的滾動(dòng)方向?qū)崿F(xiàn)方法,涉及javascript針對(duì)scrollTop事件的相關(guān)操作技巧,需要的朋友可以參考下2017-04-04微信小程序MoxB實(shí)現(xiàn)全局狀態(tài)管理流程詳解
這篇文章主要介紹了微信小程序使用MoxB實(shí)現(xiàn)全局狀態(tài)管理方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2022-11-11