如何在 jQuery Mobile (iOS) 中禁用锚点的默认行为答案

【问题标题】：How to disable the default behavior of an Anchor in jQuery Mobile (iOS)如何在 jQuery Mobile (iOS) 中禁用锚点的默认行为
【发布时间】：2012-05-23 06:52:02
【问题描述】：

我正在使用 PhoneGap 和 jQM 为 iPhone 和 iPad 构建应用程序

<div class="ui-block-a">
   <a id="btnLink" href="#pageID" data-role="button"></a>
</div>

它运行良好，但是当我在设备上运行它（没有尝试模拟器）并长按时，我会在普通浏览器中获得默认的 iPhone 菜单以打开或复制链接。

如何在我的应用中禁用此默认功能？

我尝试了这些但没有成功：

$("a").click(function(event) {
  event.preventDefault(); // long press menu still apear
});


$("a").bind('click',function(event) {
console.log(['preventingclick',event.type]);
event.preventDefault(); // long press menu still apear
});

如果我在“taphold”上绑定，我仍然会在长按时看到菜单，但在单击取消后，我会看到控制台日志：["preventing long press","taphold"]

$("a").bind('taphold', function(event) {
console.log(['preventing long press',event.type]);
event.preventDefault(); // long press menu still apear
});

如果我在这样的“taphold”事件中使用委托：

$("a").delegate('taphold', function(event) {
console.log(['preventing long press',event.type]);
event.preventDefault();
});

会解决这个问题，但我不能再附加任何事件，所以在那之后我的按钮都不起作用了。

$('#btnLink').bind("click", function() {
$.mobile.changePage('mypage', 'slide'); // won't fire any more because of the delegate before
});

我知道委托现在和将来都会应用于所有元素，但我想我已经接近答案了，但还没有。

提前致谢

【问题讨论】：

标签： jquery jquery-mobile cordova

【解决方案1】：

好的，让它工作，

我必须将代码修复、CSS 和 JavaScript 结合起来

所以在我的 CSS 中我这样做了：

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

在我的 JavaScript 中这样做了：

function onBodyLoad() {
  $("a").bind('taphold', function(event) {
  event.preventDefault();
 });
}

现在所有的链接都被禁用了，但是如果我将一个事件附加到其中的任何一个上，它都可以正常工作

谢谢大家

【讨论】：

taphold 需要 jQuery mobile 吗？

【解决方案2】：

在http://jquerymobile.com/demos/1.1.0/docs/api/events.html 处查看 JQM 触发的事件。你想处理“taphold”事件。

编辑发布此消息后不久，我最终在我的应用程序中看到了同样的问题！我发现添加这种样式，类似于@chrisben 建议的修复它：

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

我的应用程序上没有任何表单元素，所以我不知道这些，但链接和按钮在添加了这种样式后都可以正常工作。

【讨论】：

尝试使用绑定阻止默认选项卡，如果我使用委托则不起作用，我所有的点击事件和按钮都将停止工作，即使是我之后附加事件的那些，也不会起作用，我猜我快接近了，但还不是最终答案，谢谢

【解决方案3】：

当您执行 $('a').click( .. ) 时，您只是在处理 'click' 事件。这是一个不同的事件，实际上是 iOS 的系统事件，您无法在 javascript 中处理。

因此，如果您不想要此功能，则必须从您的 web 应用程序中完全禁用它。

尝试以下方法：

<script>
document.documentElement.style.webkitTouchCallout = 'none';
</script>

或者在你的 CSS 中：

a[data-role=button] {
    -webkit-user-select: none!important;
}

【讨论】：

感谢您的回复，实际上我只是尝试过，但它不起作用，仍然在我的应用程序中长按菜单...
javascript 确实有效。将 documentElement 替换为禁用样式所需的元素。

【解决方案4】：

让它在 iPhone 上工作的最简单方法是禁用 webkit 触摸样式：

document.getElementById('your element id').style.webkitTouchCallout = 'none';

【讨论】：

【解决方案5】：

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

**If you want Disable only anchor button tag use this.**
 a {-webkit-user-select: none; /* disable selection/Copy of UIWebView */
  -webkit-touch-callout: none; /* disable the IOS popup when long-press on a link */
 }

【讨论】：