如何在 jQuery Mobile (iOS) 中禁用锚点的默认行为 [英] How to disable the default behavior of an Anchor in jQuery Mobile (iOS)

问题描述

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

<a id="btnLink" href="#pageID" data-role="button"></a>

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

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

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

$("a").click(function(event) {event.preventDefault();//长按菜单仍然出现});$("a").bind('click',function(event) {console.log(['preventingclick',event.type]);event.preventDefault();//长按菜单仍然出现});

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

$("a").bind('taphold', function(event) {console.log(['防止长按',event.type]);event.preventDefault();//长按菜单仍然出现});

如果我像这样在taphold"事件上使用委托:

$("a").delegate('taphold', function(event) {console.log(['防止长按',event.type]);event.preventDefault();});

将解决该问题，但我无法再附加任何事件，因此在那之后我的按钮都将无法使用.

$('#btnLink').bind("click", function() {$.mobile.changePage('我的页面', '幻灯片');//由于之前的委托，不会再触发});

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

提前致谢

解决方案

好的，可以使用了，

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

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

谢谢大家

I am building an app for iPhone and iPad using PhoneGap and jQM

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

and it functions fine, but when I run it on the device (didn't try the simulator) and press a long press, I get the default iPhone menu for a link in a normal browser to open or copy the link.

how can I disable this default feature in my app?

I tried these with no success:

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

if I bind on 'taphold' I still see the menu on a long press, but after I click cancel I see the console log: ["preventing long press","taphold"]

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

if I use delegate on 'taphold' event like this:

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

will fix the problem, but I can't attach any events anymore, so non of my buttons will work after that.

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

I know that delegate will apply on all elements now and in the future, but I think I am getting close to the answer, but not yet.

Thanks in advance

解决方案

ok got it to work,

I had to combine both code fixes, CSS and JavaScript

so in my CSS I did this:

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

in my JavaScript did this:

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

and now all the links are disabled, but if I attach an event to any of them it will work with no problem

THanks all

这篇关于如何在 jQuery Mobile (iOS) 中禁用锚点的默认行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！