移动端怎么样才能禁止长按后菜单 绝对能解决你的问题

最近在做项目时，需要用到长按，但是在浏览器中长按默认会出来复制，粘贴的菜单，为达到交互效果则必须要禁用掉

百度了一下，方法有这几种，现在分析一下他们的优缺点

禁止默认事件

window.ontouchstart = function(e) {     e.preventDefault(); };

这确实可以达到效果，但其他的默认事件如点击，链接统统失效

实际运用中可以针对的对你需要的部分

document.querySelector("#target").ontouchstart = function(e) { e.preventDefault(); };

好了，完美解决

文字禁止选中

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

这只能禁止选中文字 并不能达到效果 并且会导致苹果浏览器input不能选中的bug 改成auto也没有用 

但这种方法可以用作防止复制粘贴文字的功能

阻止浏览器默认事件

event.preventDefault() 阻止默认事件，但会冒泡到上一层

$("foo").click(function(event){event.preventDefault();})

解决这个问题目前有一种简单粗暴的方法

在html中需要禁止的标签中加入ontouchstart = "return false;"就可以在大部分设备中达到效果

然而测试在三星手机中发现问题：在其禁止默认事件的同时禁止了诸如click等事件

所以，现在分析一下 return false

       每次在调用return false时 其实做了3件事

       event.preventDefault();               默认行为

       event.stopPropagation();                 阻止冒泡

       停止回调函数执行并立即返回

       js事件中。touchstart事件比click事件触发的要早，在事件绑定函数中return false会阻止后续的事件触发

在ios上有一种方法可以完美解决

a, img {    -webkit-touch-callout: none; /* 禁止长按链接与图片弹出菜单 */}

给你需要的盒子把标签名换成a 再给他转换成块级元素 display:block; 但该方法只能作用于ios系统 

这种方法同时做到了防止盗图的功能

举一些实际中的例子 自定义鼠标右键弹出菜单样式