十年專(zhuān)注于品牌網(wǎng)站建設(shè) 十余年專(zhuān)注于網(wǎng)站建設(shè)_小程序開(kāi)發(fā)_APP開(kāi)發(fā),低調(diào)、敢創(chuàng)新、有情懷!
      南昌百恒網(wǎng)絡(luò)微信公眾號(hào) 掃一掃關(guān)注
      小程序
      tel-icon全國(guó)服務(wù)熱線(xiàn):400-680-9298,0791-88117053
      掃一掃關(guān)注百恒網(wǎng)絡(luò)微信公眾號(hào)
      掃一掃打開(kāi)百恒網(wǎng)絡(luò)微信小程序

      百恒網(wǎng)絡(luò)

      南昌百恒網(wǎng)絡(luò)

      javascript中鼠標(biāo)按鈕事件判斷方法

      百恒網(wǎng)絡(luò) 2016-12-22 6041

      只有在主鼠標(biāo)按鈕被單擊(或鍵盤(pán)回車(chē)鍵被按下)時(shí)才會(huì)觸發(fā) click 事件,因此檢測(cè)按鈕的信息 并不是必要的。但對(duì)于 mousedown 和 mouseup 事件來(lái)說(shuō),則在其 event 對(duì)象存在一個(gè) button 屬性, 表示按下或釋放的按鈕。DOM的 button 屬性可能有如下 3個(gè)值:0 表示主鼠標(biāo)按鈕,1 表示中間的鼠 標(biāo)按鈕(鼠標(biāo)滾輪按鈕) ,2 表示次鼠標(biāo)按鈕。在常規(guī)的設(shè)置中,主鼠標(biāo)按鈕就是鼠標(biāo)左鍵,而次鼠標(biāo) 按鈕就是鼠標(biāo)右鍵。
      ? ? ? ? IE8及之前版本也提供了 button 屬性,但這個(gè)屬性的值與 DOM的 button 屬性有很大差異。
      ? ? ? ?0:表示沒(méi)有按下按鈕。?
      ? ? ? ?1:表示按下了主鼠標(biāo)按鈕。?
      ? ? ? ?2:表示按下了次鼠標(biāo)按鈕。?
      ? ? ? ?3:表示同時(shí)按下了主、次鼠標(biāo)按鈕。?
      ? ? ? ?4:表示按下了中間的鼠標(biāo)按鈕。?
      ? ? ? ?5:表示同時(shí)按下了主鼠標(biāo)按鈕和中間的鼠標(biāo)按鈕。?
      ? ? ? ?6:表示同時(shí)按下了次鼠標(biāo)按鈕和中間的鼠標(biāo)按鈕。?
      ? ? ? ?7:表示同時(shí)按下了三個(gè)鼠標(biāo)按鈕。?
      ? ? ? ?不難想見(jiàn),DOM模型下的 button 屬性比 IE模型下的 button 屬性更簡(jiǎn)單也更為實(shí)用,之所以是這樣,南昌網(wǎng)站制作公司百恒網(wǎng)絡(luò)前端開(kāi)發(fā)工程師告訴大家原因是同時(shí)按下多個(gè)鼠標(biāo)按鈕的情形十分罕見(jiàn)。常見(jiàn)的做法就是將 IE模型規(guī)范化為 DOM方式,畢竟除 IE8及更 早版本之外的其他瀏覽器都原生支持 DOM模型。而對(duì)主、中、次按鈕的映射并不困難,只要將 IE的其 他選項(xiàng)分別轉(zhuǎn)換成如同按下這三個(gè)按鍵中的一個(gè)即可(同時(shí)將主按鈕作為優(yōu)先選取的對(duì)象)。換句話(huà)說(shuō), IE中返回的 5 和 7 會(huì)被轉(zhuǎn)換成 DOM模型中的 0。?
      ? ? ? ?由于單獨(dú)使用能力檢測(cè)無(wú)法確定差異(兩種模型有同名的 button 屬性),因此必須另辟蹊徑。我 們知道,支持 DOM 版鼠標(biāo)事件的瀏覽器可以通過(guò) hasFearture()方法來(lái)檢測(cè),所以可以再為 EventUtil 對(duì)象添加如下 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;
      ? ? ? ? ? ? ? }
      ? ? ? ?}
      },
      //省略了其他代碼?
      };?
      ? ? ? ?通過(guò)檢測(cè)"MouseEvents"這個(gè)特性,就可以確定 event 對(duì)象中存在的 button 屬性中是否包含正 確的值。如果測(cè)試失敗,說(shuō)明是 IE,就必須對(duì)相應(yīng)的值進(jìn)行規(guī)范化。以下是使用該方法的示例。?


      ? ? ? ?在這個(gè)例子中,我們?yōu)橐粋€(gè)

      元素添加了一個(gè) onmousedown 事件處理程序。當(dāng)在這個(gè)元素上 按下鼠標(biāo)按鈕時(shí),會(huì)有警告框顯示按鈕的代碼。
      ? ? ? ?在使用 onmouseup 事件處理程序時(shí),button 的值表示釋放的是哪個(gè)按鈕。此 外,如果不是按下或釋放了主鼠標(biāo)按鈕,Opera 不會(huì)觸發(fā) mouseup 或 mousedown 事件。?
      ? 本文僅限內(nèi)部技術(shù)人員學(xué)習(xí)交流,不得作于其他商業(yè)用途.希望此文對(duì)廣大技人員有所幫助。原創(chuàng)文章出自:南昌網(wǎng)站建設(shè)公司-百恒網(wǎng)絡(luò)http://www.dgscpc.com/如轉(zhuǎn)載請(qǐng)注明出處!

      400-680-9298,0791-88117053
      掃一掃關(guān)注百恒網(wǎng)絡(luò)微信公眾號(hào)
      掃一掃打開(kāi)百恒網(wǎng)絡(luò)小程序

      歡迎您的光顧,我們將竭誠(chéng)為您服務(wù)×

       
       
       
       
       
       
       
       
      ×
      精品国产亚洲一区二区在线观看| 人妻在线日韩免费视频| 亚洲AV成人无码久久精品老人| 亚洲精品麻豆av| 亚洲 欧洲 日韩 综合在线| 日本精品视频一区二区三区| 国产精品臀控福利在线观看| 91精品视频播放| 久久香综合精品久久伊人| 国产99视频精品免费专区| 91精品国产自产在线观看永久| 国产韩国精品一区二区三区| 精品香蕉伊思人在线观看| 日韩经典午夜福利发布| 国产精品久久久久久无毒不卡| 国产美女在线精品免费观看| 色妞www精品视频一级下载| 91大神精品网站在线观看| 亚洲欧洲国产精品你懂的| 久久精品国产亚洲av麻豆| 国产精品对白交换视频| 日韩精品无码人成视频手机| 国产精品伦理久久久久久| 国产成人高清精品免费观看| 第一福利永久视频精品| 四虎亚洲国产成人久久精品| 精品无码中文视频在线观看| 中文字幕日韩欧美一区二区三区 | 久久亚洲精品成人AV| 久久这里只精品国产免费10| 精品久久久久久亚洲| 亚洲一区精品无码| 国产精品原创巨作av女教师| 精品一卡2卡三卡4卡免费视频| 国内精品在线视频| 精品国产品香蕉在线观看75| 亚洲精品无码不卡在线播放HE| 伊人久久精品无码av一区| 曰韩精品无码一区二区三区| 久久精品一区二区| 久久久亚洲精品无码|