国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

一次拖拽功能引發(fā)的思考

lastSeries / 1861人閱讀

摘要：最近做了一個物體可拖拽的需求，由于在手機(jī)上的支持性不是很好，就利用了系列事件，改變的進(jìn)行位移，從而達(dá)到物體跟隨手指移動的效果。但是發(fā)現(xiàn)了有以下提示雖然最終找到了原因是升級版本具體提給了，但是卻讓我陷入了思考。

最近做了一個物體可拖拽的需求，由于drag-and-drop在手機(jī)上的支持性不是很好，就利用了touch系列事件，改變transform的translate進(jìn)行位移，從而達(dá)到物體跟隨手指移動的效果。

但是發(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.

雖然最終找到了原因是升級taro1.3版本(具體提issue給taro了)，但是卻讓我陷入了思考。

可滑動節(jié)點(diǎn)應(yīng)該是passive

相信大家在使用react開發(fā)的時候，如果在touch事件里添加e.preventDefault()，控制臺會報以下的錯誤：

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事件時，react默認(rèn)已經(jīng)將addEventListener的第三個參數(shù)加上了passive:true，為了可滑動節(jié)點(diǎn)在滑動的時候不需要等待js執(zhí)行的時候就進(jìn)行滑動的動作，可以看以下touchmove受preventDefault的影響->傳送門

從視頻里可以看出來，當(dāng)沒有加passive: true時，頁面滑動會延遲，甚至出現(xiàn)卡頓。

在可滑動節(jié)點(diǎn)上禁止touch的默認(rèn)行為

因為react默認(rèn)開啟了passive，這讓我們無法去通過js層面去禁止可滑動節(jié)點(diǎn)touch的默認(rèn)行為，但是在一些場景下我們禁止掉滑動，通過自己的邏輯來實現(xiàn)“滑動效果”，這時候該怎么做呢？

這里還有一個法寶：
在css屬性中，有那么一個東西叫做touch-action。
touch-action 用于設(shè)置觸摸屏用戶如何操縱元素的區(qū)域(例如，瀏覽器內(nèi)置的縮放功能)。
當(dāng)touch-action設(shè)置為none的時候，瀏覽器將不能對該節(jié)點(diǎn)進(jìn)行任何的觸摸行為，比如說雙擊圖片放大這種行為也可以禁止。所以我們可以設(shè)置touch-action: none，代替preventDefault禁止滑動。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/105839.html

相關(guān)文章

  • 前端拖拽組件優(yōu)化

    摘要：先來看有贊做的類似的拖拽組件，它引用的庫封裝了拖拽的時候跟隨鼠標(biāo)的影子成為，是自動生成的。利用鼠標(biāo)事件拖拽更流暢優(yōu)化之后的拖拽顯然比示例的順暢很多，不會有種吃力拖動的感覺。拖動過程中也能很明顯地看出當(dāng)前拖拽的元素。 為什么棄用Html5 drag Api 之前我也用的Drag Api寫了一個draggable組件，使用起來總覺得體驗有點(diǎn)不好。 先來看有贊做的類似的拖拽UI組件，它引用...

    mykurisu 評論0 收藏0

  • HTML5 原生拖放

    摘要：發(fā)展原生拖放的發(fā)展大致可分為三個階段。在的實例基礎(chǔ)上，進(jìn)一步制定了拖放的規(guī)范。也根據(jù)規(guī)范實現(xiàn)了原生拖放功能。被拖動的元素在放置目標(biāo)范圍內(nèi)移動時，會持續(xù)觸發(fā)該事件。參考資料拖放操作拖拽操作拖拽類型列表高級程序設(shè)計第版第章腳本編程原生拖放 發(fā)展 原生拖放的發(fā)展大致可分為三個階段：IE4、IE5+、HTML5。 IE4 是最早在網(wǎng)頁中引入 JavaScript 拖放功能的，當(dāng)時只有圖像和選中...

    Thanatos 評論0 收藏0

  • 瀏覽器常用事件解析

    摘要：之前寫過一篇瀏覽器事件的相關(guān)操作和事件運(yùn)行的原理瀏覽器事件解析。注意，頁面從瀏覽器緩存加載，并不會觸發(fā)事件。事件有一個屬性，返回一個布爾值。此外，不支持事件，可以使用事件代替。 之前寫過一篇瀏覽器事件的相關(guān)操作和事件運(yùn)行的原理——JavaScript瀏覽器事件解析。這一篇主要寫一些常用的事件及一些可能的坑。 表單事件 鍵盤事件 當(dāng) , 的值發(fā)生變化時觸發(fā)。此外，打開 contente...

    zhoutk 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<