如何在jQuery Mobile（iOS）中禁用Anchor的默认行为

Question

我正在使用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'我仍然会在长按时看到菜单，但在我点击取消后我会看到控制台日志：[“防止长按”，“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
});

我知道代表将在现在和将来适用于所有元素，但我认为我已经接近答案了，但还没有。

提前致谢

Answer 1

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

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

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

我的应用程序上没有任何表单元素，所以我不知道这些，但链接和按钮都可以完美地添加这个样式。

Answer 2

好的让它起作用，

我必须结合代码修复，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();
 });
}

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

感谢所有

Answer 3

当你执行$（'a'）。点击（..）你只处理'点击'事件。这是一个不同的事件，实际上是iOS的系统事件，你无法在javascript中处理。

因此，如果您不想要，请完全禁用此功能。

尝试以下方法：

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

或者在CSS中：

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

Answer 4

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

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

Answer 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 */
 }