js 长按

作者: 吃冬瓜的小学生 | 来源:发表于2020-03-24 14:54 被阅读0次

js 长按
js长按事件
WKWebView禁止长按弹出UIMenuController
Js实现长按事件
Vue自定义长按事件
模拟浏览器长按事件
WKWebView实现长按保存图片长按识别二维码
长按UIWebView上的图片保存到相册
Js实现移动端长按事件
JS键盘事件长按停顿问题

<!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>
        /*防止长按选中文字*/
        .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')" >长按</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)
            // 清除默认行为
            //e.preventDefault();

                // 开启定时器
                this.timer = setTimeout(() => {

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

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


                }, 700);

            //记录start时间戳
            this.startTimeStamp = e.timeStamp

        }
        touchend(e) {
            console.log('touchend',e)
            this.endTimeStamp = e.timeStamp
            //console.log('end',this,this.timer,this.endTimeStamp-this.startTimeStamp)
            // 清除默认行为
            //e.preventDefault();
            // 清除定时器
            clearTimeout(this.timer);


        }




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

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




  



    /*class Person{//定义了一个名字为Person的类
        constructor(name,age){//constructor是一个构造方法，用来接收参数
            this.name = name;//this代表的是实例对象
            this.age=age;
        }
        say(){//这是一个类的方法，注意千万不要加上function
            return "我的名字叫" + this.name+"今年"+this.age+"岁了";
        }
    }
    var obj=new Person("laotie",88);
    console.log(obj.say());//我的名字叫laotie今年88岁了*/


</script>
</body>
</html>