Jquery 上下文菜单事件不适用于 ios/Safari

Question

我有一个应该触发自定义行为的按钮。因此我正在使用 Jquery 的

contextmenu

事件。 请看我的小提琴.

目前我是这样绑定事件的：

$( "#mybutton" ).contextmenu(function() {
  alert( "Handler for .contextmenu() called." );
});

我也试过这样绑定：

$( "#mybutton" ).on('contextmenu', function() {
  alert( "Handler for .contextmenu() called." );
});

正如您将在我的小提琴中看到的那样，我使用以下方法禁用了长按的默认 ios 行为：

body { -webkit-touch-callout: none !important; }
input { -webkit-user-select: none !important; }

我测试了我的小提琴：

• Chrome，Windows 上的最新版本（使用右键单击和触摸）
• Android 上的 Chrome 使用 taphold
• Internet Explorer，Windows 上的最新版本（使用右键单击和触摸）
• Opera，Windows 上的最新版本（使用右键单击和触摸）
• Firefox，Windows 上的最新版本（使用右键单击和触摸）
• Safari，在 macOS Sierra 上，（使用右键单击）

以上所有工作都符合预期。不幸的是，这不适用于我的 Ipad 上的 ios/Safari。当前的 Safari 版本是

10.1.2

我尝试通过将 Ipad 连接到我的 mac 并记录控制台输出来调试它。似乎该事件从未被解雇。

我已经在寻找解决方案，但不幸的是，唯一的解决方案似乎是使用我想避免的 jquery-mobile

taphold

或编写自定义 timer-based 事件处理程序 这也不是很干净解决方案，恕我直言。

有没有人有类似的经历，也许找到了解决办法？

Answer 1

我已经尝试了一些行为，有点奇怪，我不能给你一个确切的答案，也许试试这个代码

但是，根据我的经验，IOS 和 Safari 总是做这些事情只是为了保持良好的用户体验，我建议你不要依赖上下文菜单（至少在移动设备中），而是使用专用按钮打开 html 生成的菜单，如典型的三点按钮，这是用户体验的问题。

祝你好运。

$( "#mybutton" ).contextmenu(function(event) {
  event.preventDefault();
  console.log("asdf");
});

.mystyle{
  width: 450px;
  height: 450px;
}

<input class="mystyle" id="mybutton" type="button" value="button">