手机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

点击

2806