資訊專欄INFORMATION COLUMN
摘要：最近做了一個(gè)物體可拖拽的需求，由于在手機(jī)上的支持性不是很好，就利用了系列事件，改變的進(jìn)行位移，從而達(dá)到物體跟隨手指移動(dòng)的效果。但是發(fā)現(xiàn)了有以下提示雖然最終找到了原因是升級(jí)版本具體提給了，但是卻讓我陷入了思考。
最近做了一個(gè)物體可拖拽的需求，由于drag-and-drop在手機(jī)上的支持性不是很好，就利用了touch系列事件，改變transform的translate進(jìn)行位移，從而達(dá)到物體跟隨手指移動(dòng)的效果。
但是發(fā)現(xiàn)了有以下提示
[Violation] Added non-passive event listener to a scroll-blocking "touchstart" event. Consider marking event handler as "passive" to make the page more responsive.
雖然最終找到了原因是升級(jí)taro1.3版本(具體提issue給taro了)，但是卻讓我陷入了思考。
可滑動(dòng)節(jié)點(diǎn)應(yīng)該是passive相信大家在使用react開發(fā)的時(shí)候，如果在touch事件里添加e.preventDefault()，控制臺(tái)會(huì)報(bào)以下的錯(cuò)誤：
react-dom.development.js:1458 [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive
這是由于當(dāng)監(jiān)聽touch事件時(shí)，react默認(rèn)已經(jīng)將addEventListener的第三個(gè)參數(shù)加上了passive:true，為了可滑動(dòng)節(jié)點(diǎn)在滑動(dòng)的時(shí)候不需要等待js執(zhí)行的時(shí)候就進(jìn)行滑動(dòng)的動(dòng)作，可以看以下touchmove受preventDefault的影響->傳送門
從視頻里可以看出來，當(dāng)沒有加passive: true時(shí)，頁面滑動(dòng)會(huì)延遲，甚至出現(xiàn)卡頓。
在可滑動(dòng)節(jié)點(diǎn)上禁止touch的默認(rèn)行為因?yàn)閞eact默認(rèn)開啟了passive，這讓我們無法去通過js層面去禁止可滑動(dòng)節(jié)點(diǎn)touch的默認(rèn)行為，但是在一些場景下我們禁止掉滑動(dòng)，通過自己的邏輯來實(shí)現(xiàn)“滑動(dòng)效果”，這時(shí)候該怎么做呢？
這里還有一個(gè)法寶：
在css屬性中，有那么一個(gè)東西叫做touch-action。
touch-action 用于設(shè)置觸摸屏用戶如何操縱元素的區(qū)域(例如，瀏覽器內(nèi)置的縮放功能)。
當(dāng)touch-action設(shè)置為none的時(shí)候，瀏覽器將不能對該節(jié)點(diǎn)進(jìn)行任何的觸摸行為，比如說雙擊圖片放大這種行為也可以禁止。所以我們可以設(shè)置touch-action: none，代替preventDefault禁止滑動(dòng)。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/105839.html
摘要：先來看有贊做的類似的拖拽組件，它引用的庫封裝了拖拽的時(shí)候跟隨鼠標(biāo)的影子成為，是自動(dòng)生成的。利用鼠標(biāo)事件拖拽更流暢優(yōu)化之后的拖拽顯然比示例的順暢很多，不會(huì)有種吃力拖動(dòng)的感覺。拖動(dòng)過程中也能很明顯地看出當(dāng)前拖拽的元素。 為什么棄用Html5 drag Api 之前我也用的Drag Api寫了一個(gè)draggable組件，使用起來總覺得體驗(yàn)有點(diǎn)不好。 先來看有贊做的類似的拖拽UI組件，它引用...
摘要：發(fā)展原生拖放的發(fā)展大致可分為三個(gè)階段。在的實(shí)例基礎(chǔ)上，進(jìn)一步制定了拖放的規(guī)范。也根據(jù)規(guī)范實(shí)現(xiàn)了原生拖放功能。被拖動(dòng)的元素在放置目標(biāo)范圍內(nèi)移動(dòng)時(shí)，會(huì)持續(xù)觸發(fā)該事件。參考資料拖放操作拖拽操作拖拽類型列表高級(jí)程序設(shè)計(jì)第版第章腳本編程原生拖放 發(fā)展 原生拖放的發(fā)展大致可分為三個(gè)階段：IE4、IE5+、HTML5。 IE4 是最早在網(wǎng)頁中引入 JavaScript 拖放功能的，當(dāng)時(shí)只有圖像和選中...
閱讀 3851·2023-04-25 20:00
閱讀 3232·2021-09-22 15:09
閱讀 574·2021-08-25 09:40
閱讀 3497·2021-07-26 23:38
閱讀 2258·2019-08-30 15:53
閱讀 1155·2019-08-30 13:46
閱讀 2843·2019-08-29 16:44
閱讀 2104·2019-08-29 15:32
