資訊專欄INFORMATION COLUMN
摘要：最近做了一個物體可拖拽的需求，由于在手機上的支持性不是很好，就利用了系列事件，改變的進行位移，從而達到物體跟隨手指移動的效果。但是發現了有以下提示雖然最終找到了原因是升級版本具體提給了，但是卻讓我陷入了思考。
最近做了一個物體可拖拽的需求，由于drag-and-drop在手機上的支持性不是很好，就利用了touch系列事件，改變transform的translate進行位移，從而達到物體跟隨手指移動的效果。
但是發現了有以下提示
[Violation] Added non-passive event listener to a scroll-blocking "touchstart" event. Consider marking event handler as "passive" to make the page more responsive.
雖然最終找到了原因是升級taro1.3版本(具體提issue給taro了)，但是卻讓我陷入了思考。
可滑動節點應該是passive相信大家在使用react開發的時候，如果在touch事件里添加e.preventDefault()，控制臺會報以下的錯誤：
react-dom.development.js:1458 [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive
這是由于當監聽touch事件時，react默認已經將addEventListener的第三個參數加上了passive:true，為了可滑動節點在滑動的時候不需要等待js執行的時候就進行滑動的動作，可以看以下touchmove受preventDefault的影響->傳送門
從視頻里可以看出來，當沒有加passive: true時，頁面滑動會延遲，甚至出現卡頓。
在可滑動節點上禁止touch的默認行為因為react默認開啟了passive，這讓我們無法去通過js層面去禁止可滑動節點touch的默認行為，但是在一些場景下我們禁止掉滑動，通過自己的邏輯來實現“滑動效果”，這時候該怎么做呢？
這里還有一個法寶：
在css屬性中，有那么一個東西叫做touch-action。
touch-action 用于設置觸摸屏用戶如何操縱元素的區域(例如，瀏覽器內置的縮放功能)。
當touch-action設置為none的時候，瀏覽器將不能對該節點進行任何的觸摸行為，比如說雙擊圖片放大這種行為也可以禁止。所以我們可以設置touch-action: none，代替preventDefault禁止滑動。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/105839.html
摘要：發展原生拖放的發展大致可分為三個階段。在的實例基礎上，進一步制定了拖放的規范。也根據規范實現了原生拖放功能。被拖動的元素在放置目標范圍內移動時，會持續觸發該事件。參考資料拖放操作拖拽操作拖拽類型列表高級程序設計第版第章腳本編程原生拖放 發展 原生拖放的發展大致可分為三個階段：IE4、IE5+、HTML5。 IE4 是最早在網頁中引入 JavaScript 拖放功能的，當時只有圖像和選中...
閱讀 3776·2023-04-25 20:00
閱讀 3121·2021-09-22 15:09
閱讀 518·2021-08-25 09:40
閱讀 3425·2021-07-26 23:38
閱讀 2214·2019-08-30 15:53
閱讀 1102·2019-08-30 13:46
閱讀 2799·2019-08-29 16:44
閱讀 2054·2019-08-29 15:32
