H5移动端禁止长按弹出系统菜单"选择复制","在浏览器打开"

Posted 2023-03-03

参考技术A H5web页中由于项目需求,需要实现一个长按弹出自定义菜单供用户选择操作的功能,此功能可用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 事件在元素中用户右击鼠标时触发并打开上下文菜单。此处用于阻止菜单的出现.