长按/长按移动Safari(iPad / iPhone)时防止默认上下文菜单

时间:2012-09-06 16:00:54

标签: javascript jquery iphone ipad mobile-safari

对于网站,我想在用户“长按”屏幕时显示自定义上下文菜单。我在代码中创建了一个jQuery Longclick侦听器来显示自定义上下文菜单。将显示上下文菜单,但也会显示iPad的默认上下文菜单!我试图通过在我的监听器中向事件添加preventDefault()来防止这种情况,但这不起作用:

function showContextMenu(e){
  e.preventDefault();
  // code to show custom context menu
}

$("#myId").click(500, showContextMenu);

问题

  1. 您可以阻止显示iPad的默认上下文菜单吗?
  2. 可以使用jQuery Longclick插件完成吗?

  3. Longclick插件有一些针对iPad的特定处理(假设通过it's source code的这个片段):

    if (!(/iphone|ipad|ipod/i).test(navigator.userAgent)){
      $(this)
      .bind(_mousedown_, schedule)
      .bind([_mousemove_, _mouseup_, _mouseout_, _contextmenu_].join(' '), annul)
      .bind(_click_, click)
    }
    

    所以我假设这回答了我的第二个问题(假设插件使用了正确的事件)。

8 个答案:

答案 0 :(得分:25)

感谢JDandChips pointing我的解决方案。它与longclick插件结合使用非常完美。为了便于记录,我会发布自己的答案来展示我的所作所为。

HTML:

<script type="text/javascript"
        src="https://raw.github.com/pisi/Longclick/master/jquery.longclick-min.js"></script>

<p><a href="http://www.google.com/">Longclick me!</a></p>

Javascript已经可以了:

function longClickHandler(e){
  e.preventDefault();
  $("body").append("<p>You longclicked. Nice!</p>");
}

$("p a").longclick(250, longClickHandler);

修复方法是将这些规则添加到样式表中:

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

Disabled context menu example


更新jQuery Longclick插件似乎仅适用于iPad上的Safari,而不适用于Google Chrome!我现在正在研究这个问题。


更新2 :我已将Longclick Javascript嵌入到Fiddle的源代码中,因为我在Chrome中遇到以下错误(由于https):

  

拒绝执行来自&#39; https://raw.github.com/pisi/Longclick/master/jquery.longclick-min.js&#39;的脚本因为它的MIME类型(&#39; text / plain&#39;)不可执行,并且启用了严格的MIME类型检查。

请参阅更新版本:http://jsfiddle.net/z9ZNU/53/

答案 1 :(得分:15)

<style type="text/css">
*:not(input):not(textarea) {
  -webkit-user-select: none; /* disable selection/Copy of UIWebView */
  -webkit-touch-callout: none; /* disable the IOS popup when long-press on a link */
}       
</style>

如果您只想禁用锚点按钮标记,请使用:

a {
  -webkit-user-select: none; /* disable selection/Copy of UIWebView */
  -webkit-touch-callout: none; /* disable the IOS popup when long-press on a link */
}

答案 2 :(得分:8)

快速css解决方案:

html {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

用户选择禁用突出显示文本/区域 touch-callout禁用上下文菜单弹出窗口。

答案 3 :(得分:2)

我没有iPad,所以无法测试解决方案,但我确实遇到了类似的问题,已经解决了。我不知道这对你有什么帮助,但这里有链接:How to disable the default behavior of an Anchor in jQuery Mobile (iOS)

答案 4 :(得分:1)

无需依赖-webkit-属性。

如果您的链接是Javascript调用,那就像完全删除href="void(0)"一样简单!您的ontouchendonclick属性仍然有效。如果您希望链接看起来像原始,请添加此css:

a .originalLink { color: blue; text-decoration: underline; cursor: pointer; }

这将运行得更顺畅,尤其是当页面中有数百个链接时。

你也可以以SEO损失为代价将其扩展到“真正的”页面链接:

<a class="originalLink" onclick="location.href='http://mylink';">Real URL Link</a>

对于大多数网站而言,这不是一个好的做法,但对于特定的适合移动设备的情况(移动网络应用),这一点至关重要。

快乐的编码!

答案 5 :(得分:0)

这个github存储库适合我。就我而言,我使用UIWebView编写了一个iPad应用程序。

https://github.com/vaidik/jquery-longpress

答案 6 :(得分:0)

无需使用JavaScript,可以使用CSS执行。

仅对图像禁用上下文菜单, 采用 .d-lg-block { display: block!important; } .code-examples { box-shadow: 0 0 50px rgba(0, 0, 0, 0.2); margin: 0 0 40px; } .code-examples .nav-pills { background-size: 100%; background-image: linear-gradient(#555555, #444444); border: 1px solid #444; border-radius: 5px 5px 0 0; zoom: 1; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1); list-style: none; line-height: normal; margin: 0; padding: 5px 10px; position: relative; z-index: 1; } .code-examples .nav-pills:before, .code-examples .nav-pills:after { content: '\0020'; display: block; height: 0; overflow: hidden; } .code-examples .nav-pills li { display: inline; } .code-examples .nav-pills { background-size: 100%; background-image: linear-gradient(#555555, #444444); border: 1px solid #444; border-radius: 5px 5px 0 0; zoom: 1; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1); list-style: none; line-height: normal; margin: 0; padding: 5px 10px; position: relative; z-index: 1; height: 40px; } .code-examples .nav-pills li a { color: #ccc; display: inline-block; line-height: normal; float: left; font-size: 14px; padding: 3px 20px; text-decoration: none; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); } .nav-pills .nav-link.active, .nav-pills .show>.nav-link { background-size: 100%; background-image: linear-gradient(#222222, #444444); border-radius: 25px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 1px 2px rgba(0, 0, 0, 0.2); color: #fff; line-height: normal; } .code-examples .tab-content { box-shadow: 0 0 50px rgba(0, 0, 0, 0.4); box-sizing: border-box; padding: 20px; }

如果我们需要为特定的类禁用上下文菜单, 采用 <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <div class="d-lg-block"> <div id="quickstart_code_samples" class="code-examples"> <ul class="nav-pills nav " id="myTab" role="tablist"> <li class="nav-item "> <a class="nav-link active" id="curl-tab" data-toggle="tab" href="#curlsample" role="tab" aria-controls="curlsample" aria-selected="true">Curl</a> </li> <li class="nav-item"> <a class="nav-link" id="ruby-tab" data-toggle="tab" href="#rubysample" role="tab" aria-controls="rubysample" aria-selected="false">Ruby</a> </li> <li class=""> <a href="#pythonsample" data-toggle="pill" class="active">Python</a></li> <li class=""> <a href="#phpsample" data-toggle="pill" class="active">Php</a></li> </ul> <div class="tab-content col-md-12" id="myTabContent"> <div id="curlsample" class="tab-pane fade show ace_editor ace-monokai ace_dark active" role="tabpanel" aria-labelledby="curl-tab"> <pre> slksdk sdflkdsfkld sdflksdlkf ldsksd ddsds </pre> </div> <div id="rubysample" class="tab-pane fade ace_editor ace-monokai ace_dark" role="tabpanel" aria-labelledby="ruby-tab"> slksdk sdflkdsfkld sdflksdlkf ldsksd </div> </div> </div> </div>

答案 7 :(得分:0)

我用过这个:

<p onclick="window.location.href='https://google.com‘“>Link</p>