微信浏览器阻止弹框

微信浏览器和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">&yen; <span>7000</span></p>
        <p class="product_name">A家北欧三人位沙发</p>
    </div>
</li>

转载于:https://my.oschina.net/u/2306318/blog/1438900

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值