Html5 手机网页中,长按会触发系统事件,请问怎么取消这些事件

Html5 手机网页中,长按会触发系统事件,请问怎么取消这些事件,第1张

在页面中样式中加上下面的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


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6282345.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-19
下一篇 2023-03-19

发表评论

登录后才能评论

评论列表(0条)

保存