移动端长按屏幕取消选中文字

深藏阁楼爱情的钟 2022-04-10 03:26 472阅读 0赞

项目中要求长按屏幕弹出对话框，不能选中文字，可以设置css样式

* { 
           -webkit-touch-callout:none; 
           -webkit-user-select:none; 
           -moz-user-select:none; 
           -ms-user-select:none; 
           user-select:none; 
    }

我这里用的“\*”，也可以用在某一个元素上。  
试了好几种移动端浏览器都好使，但是魅族两年之前的一个浏览器就是不能取消选中文字，试了弹窗上加透明层不管用，也试了js的touchstart阻止默认事件，不能点击但还是能选中文字。  
是哪个默认事件促使长按选中文字，希望哪位同志知道能分享一下，谢谢！

//定时器
    var timeOutEvent ;
    function bindEvents() {
                 //因为元素是动态添加的，所以用的事件代理
                $('.box').on('touchstart', '.box-item', function (e) {
                    //如果长按超过500毫秒，则弹出蒙层
                    timeOutEvent = setTimeout(function () {
                         //既然已经触发长按弹出蒙层了，那就给定时器赋0，下面点击结束会触发touchend事件，在该事件里会判断如果timeOutEvent !== 0，则触发点击事件
                        timeOutEvent = 0;
                        //这句代码是项目独有，可以忽略
                        planNum = e.currentTarget.dataset.plannum;
                        //同上
                        lineId = e.currentTarget.dataset.lineid;
                        //同上
                        stateTwo(e.currentTarget.dataset.docstatus);
                        //同上，弹出蒙层
                        $('.state-mark').fadeIn();
                        //同上，在蒙层上滑动，禁止页面滑动
                        tops = window.scrollY;
                        bodyEl.style.position = 'fixed'
                        bodyEl.style.top = -tops + 'px'
                    }, 500);
                });
                $('.box').on('touchmove', '.box-item', function (e) {
                     //如果在屏幕上滑动，则清除定时器，不让触发长按
                    clearTimeout(timeOutEvent);
                    //并且将定时器设为0，这样也不会触发点击事件，这两句的代码作用是滑动什么都不执行
                    timeOutEvent = 0;
                });
                $('.box').on('touchend', '.box-item', function (e) {
                    //点击结束清除定时器
                    clearTimeout(timeOutEvent);
                    //如果定时器的值不为0则执行短按该做的事情
                    if (timeOutEvent !== 0) {
                        bindClick(this);
                    }
                    return false;
                });
    }