移动端网页开发消除手机自带的弹出菜单项

最近由于项目需求，需要长按弹出一个自定义菜单项供用户选择操作，此功能可用jquery的touchstart，touchmove,touchend三个触碰事件外加时间器实现，在网上找了很多，发现大部分加入这段css代码就能解决此问题，但是对于Android手机还是不能完美解决，所以还需要加入一段js代码。

  

body {

-webkit-touch-callout:none;/*系统默认菜单被禁用*/

-webkit-user-select:none;/*webkit浏览器*/

-khtml-user-select:none;/*早起浏览器*/

-moz-user-select:none;/*火狐浏览器*/

-ms-user-select:none;/*IE浏览器*/

user-select:none;/*用户是否能够选中文本*/

}

这段css代码就能解决iOS系统的手机浏览器和微信浏览器的长按出现系统自带的弹出菜单问题。但是Android手机下的微信浏览器还是出现兼容问题，此时只需要再加入一段js代码就能解决问题，代码如下：

document.οncοntextmenu=function(e){
            e.preventDefault();
        };

 

oncontextmenu事件是在元素中用户右击鼠标时出发并打开上下文菜单，此处将其阻止即可。

 

以下为长按事件代码

var timeOutEvent=0;//定时器 
    //开始按   
        var longClick =0;
        $(".invoice_line").on({
            touchstart: function(e){
                longClick=0;//设置初始为0
                  var id=this.getAttribute("id");
                timeOutEvent = setTimeout(function(){
                    //此处为长按事件-----在此显示遮罩层及删除按钮
                    longClick=1;//假如长按，则设置为1
                    $("#box").val(id);
                    $(".pop_warp").show();
                  document.oncontextmenu = function (e) {
                    e.preventDefault();
                  }
                },500);
            },
            touchmove: function(){
                clearTimeout(timeOutEvent);
                timeOutEvent = 0;
                e.preventDefault();
            },
            touchend: function(e){
                clearTimeout(timeOutEvent);
                if(timeOutEvent!=0 && longClick==0){//点击
                    var id=this.getAttribute("id");
                    var url="detail?id="+id;
                    go(url);
                }
                return false;
            }
        });