當前位置:首頁 » 操作系統 » zepto源碼

zepto源碼

發布時間: 2023-04-06 00:39:27

① js實現jquery的offset()方法(獲取當前元素相對於文檔的偏移量 )

最近做項目,由於zepto使用的功能較少,想將zepto的功能用較少原生實現,其中有個實現zepto的offset()方法取到各種值的難為了我,我網路了下,大體網上千篇一律的這樣寫到

我本著試試看悉旁森的態度將這個方法炒了上去,列印出值結果與我需要的值相差甚遠,為此我仔細翻了下源碼,源碼見下面鏈接
源碼
找到如下方法getBoundingClientRect,翻了下caniuse發現兼容性還好(本人移動端),故可以寫成以下方式

如果要考啟液慮兼容性,請仔細看zepto源碼
另外上述

改成

也可以睜畝實現

② Zepto的點透問題如何解決

1、「點透」是什麼

你可能碰到過在列表頁面上創建一個彈出層,彈出層有個關閉的按鈕,你點了這個按鈕關閉彈出層後後,這個按鈕正下方的內容也會執行點擊事件(或打開鏈接)。這個被定義為這是一個「點透」現象。

在前面的項目中遇到了如下圖的問題:在點擊彈出來差散虛的選擇組件的右上角完成後會讓完成後面的input輸入框聚焦,彈掘物出輸入鍵盤,也就是點透了

2、為什麼會出現點透呢?
這個需要從zepto(或者jqm)源碼裡面看關於tap的實現方法:

可以看出zepto的tap通過兼聽綁定在document上的touch事件來完成tap事件的模擬的,及tap事件是冒泡到document上觸發的

再點擊完成時的tap事件(touchstart ouchend)需要冒泡到document上才會觸發,而在冒泡到document之前,用戶手的接觸屏幕(touchstart)和離開屏幕(touchend)是會觸發click事件的,因為click事件有延遲觸發(這就是為什麼移動端不用click而用tap的原因)(大概是300ms,為了實現safari的雙擊事件的設計),所以在執行完tap事件之後,彈出來的選擇組件馬上就隱藏了,此時click事件還虛燃在延遲的300ms之中,當300ms到來的時候,click到的其實不是完成而是隱藏之後的下方的元素,如果正下方的元素綁定的有click事件此時便會觸發,如果沒有綁定click事件的話就當沒click,但是正下方的是input輸入框(或者select選擇框或者單選復選框),點擊默認聚焦而彈出輸入鍵盤,也就出現了上面的點透現象。

3、點透的解決方法:

方案一:來得很直接github上有個fastclick可以完美解決https://github.com/ftlabs/fastclick

引入fastclick.js,因為fastclick源碼不依賴其他庫所以你可以在原生的js前直接加上

1 window.addEventListener( "load", function() {
2 FastClick.attach( document.body );
3 }, false );

或者有zepto或者jqm的js裡面加上

1 $(function() {
2 FastClick.attach(document.body);
3 });

當然require的話就這樣:

1 var FastClick = require(『fastclick『);
2 FastClick.attach(document.body, options);

方案二:用touchend代替tap事件並阻止掉touchend的默認行為preventDefault()

1 $("#cbFinish").on("touchend", function (event) {
2 //很多處理比如隱藏什麼的
3 event.preventDefault();
4 });

方案三:延遲一定的時間(300ms+)來處理事件

1 $("#cbFinish").on("tap", function (event) {
2 setTimeout(function(){
3 //很多處理比如隱藏什麼的
4 },320);
5 });

這種方法其實很好,可以和fadeInIn/fadeOut等動畫結合使用,可以做出過度效果

理論上上面的方法可以完美的解決tap的點透問題,如果真的不行,用click

熱點內容
內置存儲卡可以拆嗎 發布:2025-05-18 04:16:35 瀏覽:336
編譯原理課時設置 發布:2025-05-18 04:13:28 瀏覽:378
linux中進入ip地址伺服器 發布:2025-05-18 04:11:21 瀏覽:612
java用什麼軟體寫 發布:2025-05-18 03:56:19 瀏覽:32
linux配置vim編譯c 發布:2025-05-18 03:55:07 瀏覽:107
砸百鬼腳本 發布:2025-05-18 03:53:34 瀏覽:944
安卓手機如何拍視頻和蘋果一樣 發布:2025-05-18 03:40:47 瀏覽:741
為什麼安卓手機連不上蘋果7熱點 發布:2025-05-18 03:40:13 瀏覽:803
網卡訪問 發布:2025-05-18 03:35:04 瀏覽:511
接收和發送伺服器地址 發布:2025-05-18 03:33:48 瀏覽:372