更新時(shí)間:2023-09-14 來(lái)源:黑馬程序員 瀏覽量:
classList屬性是HTML5新增的一個(gè)屬性,返回元素的類(lèi)名。但是ie10以上版本支持。該屬性用于在元素中添加,移除及切換 CSS 類(lèi)。classList的常見(jiàn)操作方法如下:
添加類(lèi):
element.classList.add(’類(lèi)名’);
focus.classList.add('current');
移除類(lèi):
element.classList.remove(’類(lèi)名’);
focus.classList.remove(‘current’);
切換類(lèi):
element.classList.toggle(’類(lèi)名’);
focus.classList.toggle(‘current’);
注意以上方法里面,所有類(lèi)名都不帶點(diǎn)。
移動(dòng)端 click 事件會(huì)有 300ms 的延時(shí),原因是移動(dòng)端屏幕雙擊會(huì)縮放(double tap to zoom) 頁(yè)面。解決方案有兩種:
1. 禁用縮放。 瀏覽器禁用默認(rèn)的雙擊縮放行為并且去掉 300ms 的點(diǎn)擊延遲。
<meta name="viewport" content="user-scalable=no">
2. 利用touch事件自己封裝這個(gè)事件解決 300ms 延遲。
原理就是:
1. 當(dāng)我們手指觸摸屏幕,記錄當(dāng)前觸摸時(shí)間
2. 當(dāng)我們手指離開(kāi)屏幕, 用離開(kāi)的時(shí)間減去觸摸的時(shí)間
3. 如果時(shí)間小于150ms,并且沒(méi)有滑動(dòng)過(guò)屏幕, 那么我們就定義為點(diǎn)擊
//封裝tap,解決click 300ms 延時(shí) function tap (obj, callback) { var isMove = false; var startTime = 0; // 記錄觸摸時(shí)候的時(shí)間變量 obj.addEventListener('touchstart', function (e) { startTime = Date.now(); // 記錄觸摸時(shí)間 }); obj.addEventListener('touchmove', function (e) { isMove = true; // 看看是否有滑動(dòng),有滑動(dòng)算拖拽,不算點(diǎn)擊 }); obj.addEventListener('touchend', function (e) { if (!isMove && (Date.now() - startTime) < 150) { // 如果手指觸摸和離開(kāi)時(shí)間小于150ms 算點(diǎn)擊 callback && callback(); // 執(zhí)行回調(diào)函數(shù) } isMove = false; // 取反 重置 startTime = 0; }); } //調(diào)用 tap(div, function(){ // 執(zhí)行代碼 });
【AI設(shè)計(jì)】北京143期畢業(yè)僅36天,全員拿下高薪offer!黑馬AI設(shè)計(jì)連續(xù)6期100%高薪就業(yè)
2025-09-19【跨境電商運(yùn)營(yíng)】深圳跨境電商運(yùn)營(yíng)畢業(yè)22個(gè)工作日,就業(yè)率91%+,最高薪資達(dá)13500元
2025-09-19【AI運(yùn)維】鄭州運(yùn)維1期就業(yè)班,畢業(yè)14個(gè)工作日,班級(jí)93%同學(xué)已拿到Offer, 一線均薪資 1W+
2025-09-19【AI鴻蒙開(kāi)發(fā)】上海校區(qū)AI鴻蒙開(kāi)發(fā)4期5期,距離畢業(yè)21天,就業(yè)率91%,平均薪資14046元
2025-09-19【AI大模型開(kāi)發(fā)-Python】畢業(yè)33個(gè)工作日,就業(yè)率已達(dá)到94.55%,班均薪資20763元
2025-09-19【AI智能應(yīng)用開(kāi)發(fā)-Java】畢業(yè)5個(gè)工作日就業(yè)率98.18%,最高薪資 17.5k*13薪,全班平均薪資9244元
2025-09-19