对于网站,我想在用户“长按”屏幕时显示自定义上下文菜单。我在代码中创建了一个jQuery Longclick侦听器来显示自定义上下文菜单。将显示上下文菜单,但也会显示iPad的默认上下文菜单!我试图通过在我的监听器中向事件添加preventDefault()
来防止这种情况,但这不起作用:
function showContextMenu(e){
e.preventDefault();
// code to show custom context menu
}
$("#myId").click(500, showContextMenu);
问题
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)
}
所以我假设这回答了我的第二个问题(假设插件使用了正确的事件)。
答案 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; }
更新: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)"
一样简单!您的ontouchend
或onclick
属性仍然有效。如果您希望链接看起来像原始,请添加此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应用程序。
答案 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>