首頁技術(shù)文章正文

HTML5新增屬性classList怎樣使用?【操作方法】

更新時(shí)間:2023-09-14 來源:黑馬程序員 瀏覽量:

IT培訓(xùn)班

classList屬性是HTML5新增的一個(gè)屬性,返回元素的類名。但是ie10以上版本支持。該屬性用于在元素中添加,移除及切換 CSS 類。classList的常見操作方法如下:

添加類:

element.classList.add(’類名’);

focus.classList.add('current');

移除類:

element.classList.remove(’類名’);

focus.classList.remove(‘current’);

切換類:

element.classList.toggle(’類名’);

focus.classList.toggle(‘current’);

注意以上方法里面,所有類名都不帶點(diǎn)。

click 延時(shí)解決方案

移動(dòng)端 click 事件會(huì)有 300ms 的延時(shí),原因是移動(dòng)端屏幕雙擊會(huì)縮放(double tap to zoom) 頁面。解決方案有兩種:

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)我們手指離開屏幕, 用離開的時(shí)間減去觸摸的時(shí)間

3. 如果時(shí)間小于150ms,并且沒有滑動(dòng)過屏幕, 那么我們就定義為點(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) {  // 如果手指觸摸和離開時(shí)間小于150ms 算點(diǎn)擊
                callback && callback(); // 執(zhí)行回調(diào)函數(shù)
            }
            isMove = false;  //  取反 重置
            startTime = 0;
        });
}
//調(diào)用  
  tap(div, function(){   // 執(zhí)行代碼  });


分享到:
在線咨詢 我要報(bào)名
和我們?cè)诰€交談!