前端 ios 系统 contextmenu 事件模拟

1. 前言

前端开发中为实现业务需求,经常会使用contextmenu事件弹出上下文菜单。在 PC 端通常使用右键可以触发contextmenu事件,在 Android 端也可以使用长按触发,但是在 ios 端通过长按却无法触发,即使阻止了默认事件:

js 复制代码
document.addEventListener('contextmenu', (e) => {
    e.preventDefault();
    // 业务逻辑
});

通过查看contextmenu事件的浏览器兼容性,发现 ios 系统不支持contextmenu事件,但是项目中又有这种需求,那该怎么办呢?

2. 解决方案

比较合适的方案是使用TouchEvent模拟长按事件,事件触发之后派发一个contextmenu事件,关键代码如下:

js 复制代码
let timer;
document.addEventListener('touchstart', (e) => {
    timer = setTimeout(fireContextMenuEvent, 750, e); // 750ms之后触发,可根据情况调整
});
document.addEventListener('touchend', (e) => {
    clearTimeout(timer);
});
const fireContextMenuEvent = (e) => { // 参数为原来的 touchstart event
    clearTimeout(timer);
    const event = e.changedTouches[0];
    e.target.dispatchEvent(new MouseEvent( // 手动派发一个名叫 contextmenu 的 MouseEvent
        'contextmenu', { // 传入 contextmenu 所需的参数
            bubbles: true,
            cancelable: true,
            clientX: event.clientX,
            clientY: event.clientY,
            // ... 省略了其他参数
        },
    ));
};

以上只给出了关键代码,实际上使用的时候需要处理一些特殊情况,比如touchstart之后移动了位置就不能再触发contextmenu事件了,具体使用的话可以参考这个代码,这是一个模拟长按的代码,只需要修改一部分内容就能使用。

3. 能力检测

还有个问题是我们不能在所有浏览器上添加这段代码,Android 端等正常的浏览器我们还是希望使用原生的contextmenu事件,所以需要做浏览器能力检测,可以使用如下代码检测浏览器是否支持contextmenu事件:

js 复制代码
'oncontextmenu' in window

本来期望这行代码能够在 ios 中输出false,然而令人大跌眼镜的是该代码输出了true,但是contextmenu事件确实没接收到(有点懵了,到底支不支持啊),猜测可能是 ios 支持该事件,只是无法触发。因此问题转变为了判断 ios 系统:

js 复制代码
const isIOS = /(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent);
if (isIOS) {
    // 执行上述代码
}

4. 长按提示问题

还有个问题是当用户在 ios 系统的浏览器中长按时,系统会自动选中长按的内容,并提示一些操作,我们在长按时不希望出现这个行为,可以在 CSS 中添加如下内容:

css 复制代码
body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
}

5. 总结

ios 系统浏览器无法触发contextmenu事件,在 ios 中使用contextmenu时可以通过TouchEvent模拟实现想要的效果,在不希望长按出现提示的时候可以通过添加 CSS 去除该行为。

相关推荐
翻滚吧键盘8 分钟前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
秃了也弱了。27 分钟前
Chrome谷歌浏览器插件ModHeader,修改请求头,开发神器
前端·chrome
恋猫de小郭39 分钟前
Flutter Widget Preview 功能已合并到 master,提前在体验毛坯的预览支持
android·flutter·ios
乆夨(jiuze)1 小时前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
忧郁的蛋~1 小时前
HTML表格导出为Excel文件的实现方案
前端·html·excel
小彭努力中1 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互
然我1 小时前
别再只用 base64!HTML5 的 Blob 才是二进制处理的王者,面试常考
前端·面试·html
NanLing2 小时前
【纯前端推理】纯端侧 AI 对象检测:用浏览器就能跑的深度学习模型
前端
呆呆的心2 小时前
前端必学:从盒模型到定位,一篇搞定页面布局核心 🧩
前端·css
小飞悟2 小时前
前端高手才知道的秘密:Blob 居然这么强大!
前端·javascript·html