微信浏览器阻止弹框
微信浏览器和QQ浏览器有个自带的特殊功能，就是长按会出现上图所示的弹框。有时候前端页面中有长按事件时，总是会触发这个弹框而影响我们自己开发的功能。那么该如何屏蔽这个弹框呢？ 很简单，这个弹框实际上等同于PC环境下的鼠标右键的弹框，因此只要禁止页面的弹框事件就能完美屏蔽该弹框对我们功能带来的影响。程序代码如下：
document.oncontextmenu=function(e){
//或者return false;
e.preventDefault();
};仅仅上面这段简短的代码就可以把这个难受的弹框给屏蔽掉（oncontextmenu事件中执行return false;或者e.preventDefault的效果是完全等同的）。 也许右键弹框在PC端很重要，但是对于移动端而言，这个弹框显然可有可无，因此在需要时，放心的使用上面的代码把它屏蔽掉就行。
注意不要使用下面这种代码形式（或者类似的方法）来阻止这个弹框：
//错误方法
document.addEventListener('touchstart', function(ev){
ev.preventDefault();
},false);上面这段代码会阻止页面滚动事件、a标签默认跳转事件等不该屏蔽的事件。
还有当长按事件下有图片时，长按会弹出发送给朋友，保存到手机，收藏的弹框，解决办法是在图片上层盖一个透明层，让长按事件点击不到图片，即可阻止。
<li>
<div class="cover"><!--盖在img和text上的透明层--></div>
<div class="product_img">
<img src="http://mankuhome-develop.oss-cn-shanghai.aliyuncs.com/upload/store/2/2017/04/02/ca1c5a56-1bbb-41e2-a59d-125863251f5d.jpg">
</div>
<div class="product_text">
<p class="product_price">¥ <span>7000</span></p>
<p class="product_name">A家北欧三人位沙发</p>
</div>
</li>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017/07/17 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读