微信浏览器如何阻止长按菜单?

EasonYou
  • 79

现在有个需求。。是模拟微信语音交互的
可是长按有个菜单,是显示的“在浏览器中打开”
请问这个能屏蔽掉吗?

回复
阅读 13.7k
4 个回答
了不起的盖茨比
  • 3
新手上路,请多包涵
Node.addEventListener('contextmenu', function(e){
    e.preventDefault();
});

这个靠CSS好像没法解决. 用JS吧. 以下是一个案例:

<a href="#"></a>
<a href="#" id="pointer"></a>
<style>
a {
    display: block;
    width: 200px;
    height: 200px;
    background: #000;
}
a:last-of-type {
    background: #ff0000;
}
</style>
<script>
var t;
var pointer = document.querySelector('#pointer');
var cancelTimeout = function() {
    if(t) {
        clearTimeout(t);
        t = null;
    }
};
pointer.addEventListener('touchstart', function(e) {
    t = setTimeout(function() {
        alert('2s!');
        cancelTimeout();
    }, 2000);
    e.preventDefault();
    return false;
});
pointer.addEventListener('touchend', cancelTimeout);
pointer.addEventListener('touchcancel', cancelTimeout);
</script>

touchstart事件发生的时候阻止默认事件, 由于是长按判断, 就加个定时器.

LLLL
  • 587

试试

-webkit-user-select: none;
user-select: none;
-webkit-touch-callout: none;
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏