登录 注册

手机H5页面阻止长按事件

前几天在开发一个手机H5小游戏的时候,出现一个问题:

当玩家按住页面上虚拟按键后,如果按键时间比较长,就会出现复制选择或者是长按菜单。前者可以通过CSS解决

body,html{
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-khtml-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
	-o-user-select:none;
}

但是无法解决长按菜单,而且同时还有另一个问题在于,由于这个小游戏以微信传播为主,因此还会有微信上按住网页后可以上下拖动等其他事件的插入,非常麻烦

当然,其实解决方案非常简单:

$(window).on("touchstart",function(e){
	e.preventDefault();
});

这里又产生另一个问题,首先是按钮链接无法点击,这个解决起来比较方便,只要在绑定事件时绑定一个touchend之类的即可

$("#back").on("touchend",function (){
});

另一个问题是我的游戏中包含一个overflow-y:scroll的排行榜,如果绑定以后就无法上下拖动查看了。这个问题可能解决起来比较麻烦,为了方便起见我最终采用的办法是避开这个问题,直接在游戏开始后绑定,游戏结束后解绑。

嘛。。。最后这个问题除了自己重写一个touchmove事件以外,不知道有没有什么好方法。

2016
05 28
上一篇
Older
下一篇
Newer
评论
0
点击
1956
发布
我是标题
我是文字
我是标题
我是文字
用户名
密码
用户名
密码
重复密码
努力的加载中.....