資訊專欄INFORMATION COLUMN
摘要：使用實(shí)現(xiàn)雙擊事件例如，這樣雙擊省略參數(shù)合法性的判斷自定義雙擊事件可以使用攜帶數(shù)據(jù)雙擊事件監(jiān)聽(tīng)雙擊事件觸發(fā)是否已經(jīng)點(diǎn)擊過(guò)一次事件分發(fā)使用數(shù)組實(shí)現(xiàn)雙擊事件或擊事件靈感來(lái)自于系統(tǒng)多擊觸發(fā)彩蛋的源碼用前端的方式實(shí)現(xiàn)長(zhǎng)這樣雙擊省略參數(shù)合法性的判斷創(chuàng)建
使用setTimeout實(shí)現(xiàn)雙擊事件
let div = document.getElementById("div");
doubleClick(div, function (event) {
console.log("雙擊")
})
function doubleClick(ele, fn) { // 省略參數(shù)合法性的判斷
let event = new Event("doubleClick"); // 自定義雙擊事件（可以使用CustomEvent攜帶數(shù)據(jù)）
// 雙擊事件監(jiān)聽(tīng)
ele.addEventListener("doubleClick", function (event) {
fn(event);
});
// 雙擊事件觸發(fā)
let timeout;
let clicked = false; // 是否已經(jīng)點(diǎn)擊過(guò)一次
ele.addEventListener("click", function () {
if (clicked) {
clicked = false;
if (timeout) {
clearTimeout(timeout);
}
ele.dispatchEvent(event); // 事件分發(fā)
} else {
clicked = true;
timeout = setTimeout(function () {
clicked = false;
}, 400);
}
});
}
使用數(shù)組實(shí)現(xiàn)雙擊事件或n擊事件
靈感來(lái)自于Android系統(tǒng)多擊觸發(fā)彩蛋的源碼
let div = document.getElementById("div");
multiClick(div, function (event) {
console.log("雙擊")
}, 2)
function multiClick(ele, fn, clickNum) { // 省略參數(shù)合法性的判斷
let event = new Event("multiClick"); // 創(chuàng)建n擊事件（可以使用CustomEvent攜帶數(shù)據(jù)）
let hits = [];
// n擊事件監(jiān)聽(tīng)
ele.addEventListener("multiClick", function (event) {
fn(event);
});
// n擊事件觸發(fā)
ele.addEventListener("click", function () {
let now = new Date().getTime();
hits.push(now);
if (hits.length > 1) {
if (hits[0] + 500 > now) {
if (hits.length === clickNum) {
hits = [];
ele.dispatchEvent(event); // 事件分發(fā)
}
} else {
hits.shift();
}
}
});
}
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/51865.html
摘要：使用實(shí)現(xiàn)雙擊事件例如，這樣雙擊省略參數(shù)合法性的判斷自定義雙擊事件可以使用攜帶數(shù)據(jù)雙擊事件監(jiān)聽(tīng)雙擊事件觸發(fā)是否已經(jīng)點(diǎn)擊過(guò)一次事件分發(fā)使用數(shù)組實(shí)現(xiàn)雙擊事件或擊事件靈感來(lái)自于系統(tǒng)多擊觸發(fā)彩蛋的源碼用前端的方式實(shí)現(xiàn)長(zhǎng)這樣雙擊省略參數(shù)合法性的判斷創(chuàng)建 使用setTimeout實(shí)現(xiàn)雙擊事件 例如，這樣： let div = document.getElementById(div); doubleC...
摘要：早期版本的的就是如此處理的，自定義事件在中觸發(fā)，解決單擊延時(shí)的問(wèn)題。給按鈕綁定事件事件執(zhí)行自定義事件觸發(fā)上的事件當(dāng)然實(shí)際中肯定要放在其他的事件回調(diào)中，不然沒(méi)辦法響應(yīng)用戶操作。 click延時(shí) 在移動(dòng)設(shè)備上按下手指單擊，按先后順序，依次會(huì)發(fā)生touchstart->-touchmove（如果有的話）>touchend->mousedown->mousemove（如果有的話）->mouse...
摘要：所有瀏覽器瀏覽器不支持安卓中中有屬性安卓中中有屬性有屬性的有屬性的所以在不需要的瀏覽器會(huì)直接掉，不會(huì)執(zhí)行下面的所有代碼。見(jiàn)源碼行，可以看出在響應(yīng)無(wú)操作后，則觸發(fā)。 其實(shí)一直就想花些時(shí)間讀一讀那些優(yōu)秀的開(kāi)源庫(kù)，今天終于下了決定打算死磕下自己，2016年每個(gè)月讀2-3個(gè)優(yōu)秀的開(kāi)源庫(kù)，把源碼精彩的地方和自己心得分享給大家。 目錄 （一）背景（二）源碼解析（三）Zepto 點(diǎn)擊穿透與 Fast...
摘要：分別存儲(chǔ)事件的定時(shí)器。事件定時(shí)器延時(shí)時(shí)間存儲(chǔ)事件對(duì)象滑動(dòng)方向判斷我們根據(jù)下圖以及對(duì)應(yīng)的代碼來(lái)理解滑動(dòng)的時(shí)候方向是如何判定的。取消長(zhǎng)按，以及取消所有事件取消長(zhǎng)按取消所有事件方式都是類似，先調(diào)用取消定時(shí)器，然后釋放對(duì)應(yīng)的變量，等候垃圾回收。 前言 移動(dòng)端原生支持touchstart、touchmove、touchend等事件，但是在平常業(yè)務(wù)中我們經(jīng)常需要使用swipe、tap、double...
閱讀 2674·2021-11-24 09:38
閱讀 1985·2019-08-30 15:53
閱讀 1246·2019-08-30 15:44
閱讀 3237·2019-08-30 14:10
閱讀 3587·2019-08-29 16:29
閱讀 1808·2019-08-29 16:23
閱讀 1107·2019-08-29 16:20
閱讀 1476·2019-08-29 11:13
