Jquery 上下文菜单事件在 ios/Safari 上不起作用

Question

我有一个应该触发自定义行为的按钮。因此我正在使用 Jquery 的contextmenu事件。请看我的小提琴。

目前我以这种方式绑定事件：

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

我也尝试像这样绑定它：

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

正如您将在我的小提琴中看到的，我使用以下命令禁用了 longpress 的默认 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的手机的taphold，我想，以避免或编写定制的，基于计时器事件处理程序这也并不是一个很干净的解决方案，恕我直言。

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

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">