JavaScript Event學(xué)習(xí)第十章 一些可替換的事件對(duì)
這一章我們打算尋找哪些事件可以用來(lái)仿真鼠標(biāo)事件。注意這一系列測(cè)試不包括屏幕閱讀器。因?yàn)槲也荒軡M(mǎn)足所有的條件,因此測(cè)試也有局限性。這個(gè)測(cè)試目標(biāo)僅僅只是那些在圖形界面下的瀏覽器中不使用鼠標(biāo)的用戶(hù)。
我假設(shè)這些測(cè)試一樣可以用來(lái)在一些移動(dòng)設(shè)備上。因?yàn)闂l件不足,所以也不能測(cè)試。很多時(shí)候在移動(dòng)設(shè)備上表現(xiàn)總是不盡如人意。
總結(jié)
不幸的是,我們不能制定一個(gè)嚴(yán)格的鼠標(biāo)事件和非鼠標(biāo)的一對(duì)一的方案,因?yàn)榉鞘髽?biāo)事件和鼠標(biāo)事件有很多不同。所以下面的建議在大多數(shù)場(chǎng)合適用,但不是所有。
下面就是我的測(cè)試結(jié)果:
1、mouseover:focus
2、mouseout:blur
3、click:不需要匹配
4、dblclick:不知道
5、mousedown:keydown(最不壞的選擇)
6、mouseup:keyup(最不壞的選擇)
7、mousemove:沒(méi)有鼠標(biāo)不可能
如果頁(yè)面一定需要完美的支持非鼠標(biāo)用戶(hù),那么我們可選擇的能應(yīng)用事件處理程序的元素就非常少。實(shí)際上就回到了Netscape 3時(shí)代,那時(shí)候事件處理程序只在鏈接和表單里才有用。
更多的研究還是有必要的。
準(zhǔn)備
在大多數(shù)的瀏覽器中用戶(hù)可以通過(guò)Tab鍵來(lái)飄過(guò)整個(gè)頁(yè)面。當(dāng)他們這樣做的時(shí)候,焦點(diǎn)就會(huì)跳到下一個(gè)鏈接或者表單上。這在IE和Mozilla都可以運(yùn)作。在Safari里面你需要按F1然后才能激活鍵盤(pán)快捷鍵。
Opera用戶(hù)是另外一個(gè)系統(tǒng)的。鏈接上的跳轉(zhuǎn)需要按Ctrl+方向鍵。雖然是不同的組合,但是我還是會(huì)稱(chēng)其為“Tabbing”。
例子:傳統(tǒng)的mouseover
如何做到呢?首先也是最重要的為mouseover和mouseout的添加兩個(gè)事件:
imgs[i].onmouseover = imgs[i].onfocus = mouseGoesOver;
imgs[i].onmouseout = imgs[i].onblur = mouseGoesOut;
現(xiàn)在當(dāng)用戶(hù)鼠標(biāo)經(jīng)過(guò)或者tab經(jīng)過(guò)時(shí),函數(shù)都會(huì)被執(zhí)行。
然而,添加一些事件還是不夠的。我原始的工作室直接在圖像上設(shè)置onmouseover和mouseout。不幸的是tab一個(gè)圖像基本上不可能:tab只對(duì)鏈接和表單有用。所以我需要對(duì)把事件添加的圖像的父節(jié)點(diǎn)上:鏈接。
這個(gè)簡(jiǎn)單的例子不會(huì)因?yàn)槲覀兊闹匦伦?cè)改變,但更復(fù)雜的腳本可能會(huì)無(wú)法界定訪問(wèn)活動(dòng),例如,一個(gè)div。
為了保證完美的可用性,我們可以只定義鏈接和表單的事件,就像我們?cè)?998年時(shí)候那樣干的。雖然網(wǎng)上的大部分事件還是定義在鏈接上,不過(guò)一個(gè)復(fù)雜的比如文本編輯的腳本對(duì)于非鼠標(biāo)用戶(hù)就不可用,因?yàn)槲覀円谏厦鎐lick。
翻譯地址:http://www.quirksmode.org/js/events_pairs.html
作者:北玉(tw:@rehawk)
文章出處:beiyu.cnblogs.com
相關(guān)文章
js實(shí)現(xiàn)固定寬高滑動(dòng)輪播圖效果
本文主要分享了js實(shí)現(xiàn)PC固定寬高滑動(dòng)輪播圖效果的示例代碼。具有一定的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-01-01JS運(yùn)動(dòng)特效之任意值添加運(yùn)動(dòng)的方法分析
這篇文章主要介紹了JS運(yùn)動(dòng)特效之任意值添加運(yùn)動(dòng)的方法,結(jié)合實(shí)例形式分析了javascript針對(duì)多物體運(yùn)動(dòng)通過(guò)參數(shù)控制不同運(yùn)動(dòng)效果的實(shí)現(xiàn)方法,需要的朋友可以參考下2018-01-01JavaScript實(shí)現(xiàn)自動(dòng)生成網(wǎng)頁(yè)元素功能(按鈕、文本等)
這篇文章主要介紹了JavaScript實(shí)現(xiàn)自動(dòng)生成網(wǎng)頁(yè)元素功能,文章列出了三種可以進(jìn)行增刪改克隆按鈕、文本等元素的方法,感興趣的小伙伴們可以參考一下2015-11-11JS中產(chǎn)生20位隨機(jī)數(shù)以0-9為例也可以是a-z A-Z
本節(jié)主要介紹了JS如何產(chǎn)生隨機(jī)數(shù),本例產(chǎn)生20位隨機(jī)數(shù)以0-9為例也可以是a-z A-Z,需要的朋友可以參考下2014-08-08利用XMLHTTP傳遞參數(shù)在另一頁(yè)面執(zhí)行并刷新本頁(yè)
利用XMLHTTP傳遞參數(shù)在另一頁(yè)面執(zhí)行并刷新本頁(yè)...2006-10-10ES6 Object屬性新的寫(xiě)法實(shí)例小結(jié)
這篇文章主要介紹了ES6 Object屬性新的寫(xiě)法,結(jié)合實(shí)例形式總結(jié)分析了ES6中object屬性的常見(jiàn)簡(jiǎn)化寫(xiě)法,需要的朋友可以參考下2019-06-06IE FF OPERA都可用的彈出層實(shí)現(xiàn)代碼
多瀏覽器的彈出層效果核心代碼。需要的朋友可以測(cè)試下這個(gè)是從正在使用的網(wǎng)站中扒下來(lái)的。2009-09-09