在页面中样式中加上下面的css代码
*{-webkit-overflow-scrolling: touch
-webkit-touch-callout:none
-webkit-user-select:none
-khtml-user-select:none
-moz-user-select:none
-ms-user-select:none
user-select:none
}
H5web页中由于项目需求,需要实现一个长按d出自定义菜单供用户选择 *** 作的功能,此功能可用jQuery的
touchstart,touchmove,touchend三个触碰事件外加时间器实现,这里就不多说了.
研究css3得出只需在需要禁止的页面中加入如下cssy样式定义
body {
-webkit-touch-callout:none/*系统默认菜单被禁用*/
-webkit-user-select:none/*webkit浏览器*/
-khtml-user-select:none/*早起浏览器*/
-moz-user-select:none/*火狐浏览器*/
-ms-user-select:none/*IE浏览器*/
user-select:none/*用户是否能够选中文本*/
}
此段css样式加入后能解决ios下手机浏览器,微信浏览器长按出现选择系统菜单问题,但是对于Android下微信浏览器还会出现不兼容问题
需在禁用页面加入一段js事件处理如下:
document.oncontextmenu=function(e){
e.preventDefault()
}
oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单。此处用于阻止菜单的出现.
在iPhone中很好解决,只要给长按的div设置两个css:-webkit-user-select: none/*禁用手机浏览器的用户选择功能 */
-moz-user-select: none
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)