偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

深入了解iPad上的MouseEvent

移動(dòng)開發(fā) iOS
在iPad上(或者說各個(gè)移動(dòng)終端上),你的WebAPP應(yīng)該能處理好TouchEvent,而不再依賴于MouseEvent。然而如果你的WebAPP需要同時(shí)面向PC和iPad兩種平臺(tái)的瀏覽器用戶,而迫于時(shí)間或者人力配備你沒法分別提供兩種版本的時(shí)候。。。你也許有必要了解一下下面這些有關(guān)iPad上MouseEvent相關(guān)的細(xì)節(jié),然后砍掉兩個(gè)平臺(tái)上有明顯差異的一些花哨特性,這樣才能做出一個(gè)較好地兼容兩個(gè)平臺(tái)的WebAPP。

iPad上沒有鼠標(biāo),所以手指在觸發(fā)觸摸事件(TouchEvent)的時(shí)候,系統(tǒng)也會(huì)產(chǎn)生出模擬的鼠標(biāo)事件(MouseEvent)。
這對(duì)于普通網(wǎng)頁的瀏覽需求而言,基本可以做到與PC端瀏覽器無明顯差異。但是如果你正在做一款與用戶有著強(qiáng)交互的WebAPP程序,比如一個(gè)html5小游戲或者圖片處理工具什么的,那么依賴默認(rèn)模擬恐怕不能滿足產(chǎn)品的需求。
一個(gè)通常的建議是:在iPad上(或者說各個(gè)移動(dòng)終端上),你的WebAPP應(yīng)該能處理好TouchEvent,而不再依賴于MouseEvent。
然而如果你的WebAPP需要同時(shí)面向PC和iPad兩種平臺(tái)的瀏覽器用戶,而迫于時(shí)間或者人力配備你沒法分別提供兩種版本的時(shí)候。。。你也許有必要了解 一下下面這些有關(guān)iPad上MouseEvent相關(guān)的細(xì)節(jié),然后砍掉兩個(gè)平臺(tái)上有明顯差異的一些花哨特性,這樣才能做出一個(gè)較好地兼容兩個(gè)平臺(tái)的 WebAPP。     

在閱讀下文前,我假設(shè)你已經(jīng)熟悉PC瀏覽器上MouseEvent的運(yùn)作,也對(duì)TouchEvent有了粗略的了解。如果你并不了解,那理解以下各個(gè)細(xì)節(jié)可能有困難。

safari只對(duì)可點(diǎn)擊(clickable)的HTML元素才會(huì)產(chǎn)生MouseEvent。這在ADC文檔中也提到了。 什么叫可點(diǎn)擊,ADC文檔定義是只要HTML元素響應(yīng)mousemove、mousedown、mouseup、click四種MouseEvent中的 一個(gè)就算是可點(diǎn)擊。如果你有個(gè)網(wǎng)頁菜單只響應(yīng)mouseover、mouseout,那可能不能工作,加個(gè)onclick="void(0)"就行了。但 實(shí)際測(cè)試發(fā)現(xiàn),只要響應(yīng)任意一個(gè)MouseEvent就算可點(diǎn)擊了,估計(jì)safari已修正此問題。
注意:下文所有關(guān)于“可點(diǎn)擊”“不可點(diǎn)擊”的描述都是針對(duì)是否響應(yīng)MouseEvent而言,而不是指TouchEvent。

與W3C規(guī)范建議的不同,iPad是在手指離開屏幕以后才可能會(huì)產(chǎn)生MouseEvent。 所以像手指單擊屏幕這種操作的實(shí)際事件序列通常 是:touchstart->touchend->mousemove->mousedown->mouseup->click; 而不是我們期望的這樣的時(shí) 序:touchstart->mousedown->touchend->mouseup->click。

手指快速單擊屏幕觸發(fā)的MouseEvent并不是緊跟在TouchEvent之后的,有一個(gè)時(shí)延。 這是為了等待可能的雙擊操作。iPad2 Safari的實(shí)測(cè)時(shí)延大約為375ms。所以實(shí)際時(shí)序大約是這樣的:(手指按下)touchstart->(手指快速提 起)touchend->(等待約375ms)mousemove->mousedown->mouseup->click。
這對(duì)WebAPP的直接影響就是由于從用戶操作完(手指提起)到onclick執(zhí)行有375ms的延時(shí),用戶總覺得你的軟件反應(yīng)有點(diǎn)慢半拍。
但如果單擊速度較慢,即手指按下到提起之間的時(shí)延超過大約120ms,touchend到其他MouseEvent之間就不再會(huì)有這個(gè)375ms的時(shí)延。因?yàn)橄到y(tǒng)認(rèn)為這已經(jīng)不滿足手指快速雙擊操作的判定條件。

手指快速雙擊屏幕操作不會(huì)觸發(fā)任何MouseEvent。我 是說“任何”,就是說不光不會(huì)觸發(fā)dblclick事件,連mousedown、mouseup、click等等所有MouseEvent都不會(huì)有。本操 作默認(rèn)的事件流是:touchstart->touchend->touchstart->touchend。如果頁面開發(fā)人員不做任 何限制,瀏覽器默認(rèn)行為是嘗試縮放網(wǎng)頁。

一次手指單擊操作不會(huì)同時(shí)產(chǎn)生mouseover和(mousedown、mouseup、click)兩組事件。如 果一個(gè)響應(yīng)mouseover事件的元素從渲染完畢或者上一次收到mouseout之后尚未收到mouseover事件,則單擊觸發(fā)的事件流 為:touchstart->touchend->mouseover->mousemove;反之,單擊觸發(fā)的事件流 為:touchstart->touchend->mousemove->mousedown->mouseup->click。
不響應(yīng)mouseover事件的元素只會(huì)收到上述后一種事件流,這避免絕大多數(shù)鏈接需要手指點(diǎn)擊兩次才能跳轉(zhuǎn)頁面。

一個(gè)HTML元素收到mouseover之后,只有在手指點(diǎn)擊另一個(gè)可點(diǎn)擊的HTML元素時(shí),才會(huì)收到mouseout事件。因 為沒有鼠標(biāo),所以不能像PC機(jī)上一樣在鼠標(biāo)移入移除元素區(qū)域時(shí)觸發(fā)mouseover和mouseout事件,只能靠手指點(diǎn)擊來切換mouseover; 又因?yàn)椴豢牲c(diǎn)擊的元素不會(huì)觸發(fā)任何MouseEvent,所以只有在另一個(gè)HTML元素上觸發(fā)MouseEvent時(shí)前一個(gè)可點(diǎn)擊元素才會(huì)收到 mouseout事件。

手指在屏幕上移動(dòng),不會(huì)觸發(fā)大量的mousemove事件。如 第2點(diǎn)所說,只有在手指離開屏幕時(shí),才可能產(chǎn)生MouseEvent消息,所以你只可能收到一次mousemove事件,包括本次操作觸發(fā)的其他所有 MouseEvent,坐標(biāo)都是手指提起位置的坐標(biāo)。所以在PC瀏覽器上通過mousemove實(shí)現(xiàn)的邏輯,在iPad上需要通過TouchEvent來 實(shí)現(xiàn)。

實(shí)測(cè)發(fā)現(xiàn),似乎手指在屏幕上緩慢移動(dòng)時(shí),提起手指才會(huì)觸發(fā)MouseEvent;如果手指快速移動(dòng),則提起手指不會(huì)觸發(fā)任何MouseEvent。原因不明。

如果一個(gè)HTML元素響應(yīng)TouchEvent,手指在該元素上按下并移動(dòng),即使手指移出該元素的區(qū)域,該元素仍然會(huì)收到touchmove事件,直到手指提起收到一個(gè)touchend結(jié)束。也就是說一個(gè)HTML元素通常總能收到一個(gè)完整的touchstart->(N個(gè))touchmove->touchend事件序列,除非系統(tǒng)給它發(fā)出一個(gè)touchcancel事件。這跟PC瀏覽器上MouseEvent特性也不太相同。

一旦在一次手指操作的事件序列touchstart->(0-N個(gè))touchmove->touchend中的任何一個(gè)事件函數(shù)里調(diào)用了event.preventDefault(),本次操作不再產(chǎn)生任何MouseEvent。所以不能期望在touchstart中調(diào)用preventDefault只阻止mousedown事件的產(chǎn)生。

以上各個(gè)特性在iPad2/iOS4.3.3的safari上測(cè)試驗(yàn)證過,對(duì)于其他safari內(nèi)核的瀏覽器(如QQ瀏覽器HD等)都是適用的。至于其他非safari內(nèi)核的瀏覽器,在MouseEvent的支持上基本都不如safari完整和合理。例如Opera Mini只有手指單擊屏幕時(shí)產(chǎn)生MouseEvent,并且不支持TouchEvent;UC瀏覽器雖然將mousedown移到了touchstart 之后,但是手指移動(dòng)后提起來卻不能產(chǎn)生mouseup事件。有興趣的可以做進(jìn)一步測(cè)試。Android用戶也可以在Android平板電腦上做一些測(cè)試, 如果能將測(cè)試結(jié)果分享給我,我將非常感謝。

【 附錄及參考文檔】

1. 測(cè)試頁面鏈接:http://hokyhu.sinaapp.com/event_test.html
你還可以在這個(gè)頁面上體驗(yàn)iPad強(qiáng)大的多點(diǎn)觸摸功能,試試看最多能檢測(cè)到幾個(gè)觸點(diǎn)。
2. W3C關(guān)于TouchEvent的技術(shù)草案:https://dvcs.w3.org/hg/webevents/raw-file/tip/touchevents.html
該草案主要定義了TouchEvent相關(guān)的技術(shù)細(xì)節(jié),并少量涉及TouchEvent與MouseEvent之間的配合。
3. ADC文檔:https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/SafariWebContent.pdf
文檔在“Handling Events”這一章描述了對(duì)MouseEvent的支持。

責(zé)任編輯:閆佳明 來源: oschina
相關(guān)推薦

2020-07-20 06:35:55

BashLinux

2009-08-25 16:27:10

Mscomm控件

2010-07-13 09:36:25

2020-09-21 09:53:04

FlexCSS開發(fā)

2022-08-26 13:48:40

EPUBLinux

2010-11-19 16:22:14

Oracle事務(wù)

2010-06-23 20:31:54

2018-09-04 16:20:46

MySQ索引數(shù)據(jù)結(jié)構(gòu)

2018-02-24 13:21:02

2016-10-20 08:46:17

2021-09-03 08:27:47

FortinetSASE平臺(tái)安全

2017-01-20 08:30:19

JavaScriptfor循環(huán)

2019-11-29 16:21:22

Spring框架集成

2019-08-02 08:59:21

Token認(rèn)證服務(wù)器

2010-11-08 13:54:49

Sqlserver運(yùn)行

2010-09-27 09:31:42

JVM內(nèi)存結(jié)構(gòu)

2021-04-28 10:13:58

zookeeperZNode核心原理

2018-06-22 13:05:02

前端JavaScript引擎

2021-01-19 12:00:39

前端監(jiān)控代碼

2013-04-16 10:20:21

云存儲(chǔ)服務(wù)云存儲(chǔ)SLA服務(wù)水平協(xié)議
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)