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

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”上绑定，我仍然会在长按时看到菜单，但是在单击取消后，我会看到控制台日志：[“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
});

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

提前致谢

Answer 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();
 });
}

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

谢谢大家

Answer 2

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

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

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

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

Answer 3

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

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

尝试以下操作：

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