阻止微信浏览器/QQ浏览器弹框“在浏览器打开”
相信许多移动端工程师对下面这张图中出现的东西记忆深刻:
微信浏览器和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标签默认跳转事件等不该屏蔽的事件。