我有一个按钮，应该触发自定义行为。因此，我正在使用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上的最新版本(使用右键单击和触摸(
- 火狐，Windows上的最新版本(使用右键单击和触摸(
- Safari，在macOS Sierra上(使用右键单击(
以上所有工作均按预期进行。不幸的是，这在我的Ipad上的ios/Safari上不起作用。当前的 Safari 版本是10.1.2
我尝试通过将 Ipad 连接到我的 mac 并记录控制台输出来调试它。似乎该事件从未被触发。
我已经在寻找解决方案，但不幸的是，唯一的解决方案似乎是使用 jquery-mobile 的taphold我想避免的，或者编写一个基于自定义计时器的事件处理程序，这也不是一个非常干净的解决方案，恕我直言。
有没有人有过类似的经历，也许找到了解决方案？
我已经尝试了一些行为，它有点超出范围，我无法给你一个确切的答案，也许试试这段代码
但是，根据我的经验，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">这个项目在这里工作： https://github.com/john-doherty/long-press-event
例如：
<html>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script>
/*!
* long-press-event - v2.2.0
* Pure JavaScript long-press-event
* https://github.com/john-doherty/long-press-event
* @author John Doherty <www.johndoherty.info>
* @license MIT
*/
!function(e,t){"use strict";var n=null,a="ontouchstart"in e||navigator.MaxTouchPoints>0||navigator.msMaxTouchPoints>0,i=a?"touchstart":"mousedown",o=a?"touchend":"mouseup",m=a?"touchmove":"mousemove",u=0,r=0,s=10,c=10;function l(i){v(i);var m=i.target,u=parseInt(m.getAttribute("data-long-press-delay")||"500",10);n=function(t,n){if(!(e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame&&e.mozCancelRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame))return e.setTimeout(t,n);var a=(new Date).getTime(),i={},o=function(){(new Date).getTime()-a>=n?t.call():i.value=requestAnimFrame(o)};return i.value=requestAnimFrame(o),i}(function(e){v();var n=a?e.touches[0].clientX:e.clientX,i=a?e.touches[0].clientY:e.clientY;this.dispatchEvent(new CustomEvent("long-press",{bubbles:!0,cancelable:!0,detail:{clientX:n,clientY:i}}))&&t.addEventListener(o,function e(n){t.removeEventListener(o,e,!0),function(e){e.stopImmediatePropagation(),e.preventDefault(),e.stopPropagation()}(n)},!0)}.bind(m,i),u)}function v(t){var a;(a=n)&&(e.cancelAnimationFrame?e.cancelAnimationFrame(a.value):e.webkitCancelAnimationFrame?e.webkitCancelAnimationFrame(a.value):e.webkitCancelRequestAnimationFrame?e.webkitCancelRequestAnimationFrame(a.value):e.mozCancelRequestAnimationFrame?e.mozCancelRequestAnimationFrame(a.value):e.oCancelRequestAnimationFrame?e.oCancelRequestAnimationFrame(a.value):e.msCancelRequestAnimationFrame?e.msCancelRequestAnimationFrame(a.value):clearTimeout(a)),n=null}"function"!=typeof e.CustomEvent&&(e.CustomEvent=function(e,n){n=n||{bubbles:!1,cancelable:!1,detail:void 0};var a=t.createEvent("CustomEvent");return a.initCustomEvent(e,n.bubbles,n.cancelable,n.detail),a},e.CustomEvent.prototype=e.Event.prototype),e.requestAnimFrame=e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(t){e.setTimeout(t,1e3/60)},t.addEventListener(o,v,!0),t.addEventListener(m,function(e){var t=Math.abs(u-e.clientX),n=Math.abs(r-e.clientY);(t>=s||n>=c)&&v()},!0),t.addEventListener("wheel",v,!0),t.addEventListener("scroll",v,!0),t.addEventListener(i,function(e){u=e.clientX,r=e.clientY,l(e)},!0)}(window,document);
// listen for long-press events
document.addEventListener('long-press', function(e) {
e.target.setAttribute('data-editing', 'true');
});
</script>
<style>
.dock-item {
font-size: 14px;
font-family: arial;
display: inline-block;
margin: 10px;
padding: 10px;
border: 1px solid #ccc;
cursor: pointer;
width: 70px;
height: 70px;
border-radius: 3px;
text-align: center;
user-select: none;
}
.no-text-select {
-webkit-touch-callout:none; /* iOS Safari */
-webkit-user-select:none; /* Chrome/Safari/Opera */
-khtml-user-select:none; /* Konqueror */
-moz-user-select:none; /* Firefox */
-ms-user-select:none; /* Internet Explorer/Edge */
user-select:none; /* Non-prefixed version */
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
@keyframes jiggle {
0% {
transform: rotate(-1deg);
}
50% {
transform: rotate(1deg);
}
}
.dock-item[data-editing="true"] {
animation: jiggle 0.2s infinite;
border: 1px solid #aaa;
box-shadow: 0 0 1px rgba(0,0,0,.85);
}
</style>
<body>
<div class="no-text-select dock-item" data-long-press-delay="700">Press and hold me for 0.750s</div>
<div class="no-text-select dock-item">Press and hold me for 0.5s</div>
</body>
</html>