js 長(zhǎng)按

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Title</title>
    <style>
        /*防止長(zhǎng)按選中文字*/
        .testDiv{
            -webkit-touch-callout:none;
            -webkit-user-select:none;
            -khtml-user-select:none;
            -moz-user-select:none;
            -ms-user-select:none;
            user-select:none;

        }
    </style>
</head>
<body>
<div>

    <button class="longTap"  onClick="console.log('tap')" >長(zhǎng)按</button>

    <div class="testDiv" style="height:60px;background:darkolivegreen" onclick="console.log(111)">hahahhahhahahahahhahhahahha</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vconsole@3.3.4/dist/vconsole.min.js"></script>
<script>
    var vConsole = new VConsole();

    class LongPress{
        constructor(type,el, callback) {
            this.callback = callback
            this.type = type
            this.el = document.querySelector(el);
            this.timer = null;

            this.startTimeStamp = null
            this.endTimeStamp = null

            this.init();
        }
        init() {
            this.el.addEventListener('touchstart',(e)=>{
                this.touchstart(e)
            })
            this.el.addEventListener('touchend',(e)=>{
                this.touchend(e)
            })



        }
        touchstart(e) {

            console.log('touchstart',e)
            // 清除默認(rèn)行為
            //e.preventDefault();

                // 開(kāi)啟定時(shí)器
                this.timer = setTimeout(() => {

                    if (typeof this.callback === 'function') {

                        this.callback();
                    } else {
                        console.error('callback is not a function!');
                    }


                }, 700);

            //記錄start時(shí)間戳
            this.startTimeStamp = e.timeStamp

        }
        touchend(e) {
            console.log('touchend',e)
            this.endTimeStamp = e.timeStamp
            //console.log('end',this,this.timer,this.endTimeStamp-this.startTimeStamp)
            // 清除默認(rèn)行為
            //e.preventDefault();
            // 清除定時(shí)器
            clearTimeout(this.timer);


        }




    }
    new LongPress('longtap','.longTap',function () {
        console.log('long pressing....')
    })

    new LongPress('longtap','.testDiv',function () {
        console.log(1234556)
    })




  



    /*class Person{//定義了一個(gè)名字為Person的類(lèi)
        constructor(name,age){//constructor是一個(gè)構(gòu)造方法，用來(lái)接收參數(shù)
            this.name = name;//this代表的是實(shí)例對(duì)象
            this.age=age;
        }
        say(){//這是一個(gè)類(lèi)的方法，注意千萬(wàn)不要加上function
            return "我的名字叫" + this.name+"今年"+this.age+"歲了";
        }
    }
    var obj=new Person("laotie",88);
    console.log(obj.say());//我的名字叫l(wèi)aotie今年88歲了*/


</script>
</body>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容