当前位置: 首页 > 知识库问答 >
问题:

iPhone上Safari的跨度内锚定标记块点击事件

林炫明
2023-03-14

我已经设计了一个普通的链接,类似于我们基于Sencha Touch 2的移动应用程序中的按钮,我对大多数链接在苹果手机上的Safari中不起作用有问题。

该链接是一个普通的

这里是标记:

<a href="http://test-site.xx/full-site-page?param=value" class="x-button-normal x-button btn-profile">
    <span class="x-button-label">View profile on full site</span>
</a>

在Chrome中测试这个不会出现任何问题,即单击span会导致父超链接被跟随。两者都是基于Webkit的浏览器。我们的一名测试人员也在Safari的Macbook上测试了这一点,没有问题;我也在Chrome使用Wacom竹平板电脑测试了这一点,没有问题。这只是移动设备上的一个问题(在苹果手机和Android2.2上测试)——这就是我们的目标。

是否有一个CSS属性,我可以设置

更新:以下是Chrome开发者控制台报告的内部跨度样式:

-webkit-box-align: center;
-webkit-box-flex: 1;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-user-drag: none;
-webkit-user-select: none;
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: none;
background-origin: padding-box;
border-bottom-color: white;
border-bottom-style: none;
border-bottom-width: 0px;
border-left-color: white;
border-left-style: none;
border-left-width: 0px;
border-right-color: white;
border-right-style: none;
border-right-width: 0px;
border-top-color: white;
border-top-style: none;
border-top-width: 0px;
box-shadow: none;
box-sizing: border-box;
color: white;
cursor: auto;
display: inline;
font-family: 'Helvetica Neue', HelveticaNeue, Helvetica-Neue, Helvetica, 'BBAlpha Sans', sans-serif;
font-size: 18px;
font-weight: bold;
height: auto;
line-height: 21px;
overflow-x: hidden;
overflow-y: hidden;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: static;
text-align: center;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
width: auto;    

非常感谢。


共有2个答案

司马彬
2023-03-14

我认为这与Sencha Touch防止变焦有关。他们在代码中添加了预防大多数触摸启动事件的代码(这些事件会阻止链接的使用)。对于锚点有例外,但对于锚点的子代则不例外(所以敲击锚点本身工作正常,但不敲击锚点内的跨度)。我能够在我的应用程序启动方法中进行快速修补程序:

Ext.Viewport.setPreventZooming(false); // unbind any existing handler
Ext.Viewport.doPreventZooming = Ext.Function.createInterceptor(Ext.Viewport.doPreventZooming, function(e){
    return !Ext.fly(e.target).findParent('a');
    });
Ext.Viewport.setPreventZooming(true);

上面的代码没有保修(没有在Android上测试,我怀疑它是相当低效)。我还报告了这个错误:http://www.sencha.com/forum/showthread.php?215032-Links-are-prevented-when-tapping-on-children

方昊英
2023-03-14

这篇文章提到了以下CSS属性,解决了这个问题:

pointer-events: none;

将此添加到内部的样式中

奇怪的是,senchatouch2似乎干扰了DOM,不确定它是什么。在一个完全静态的HTML页面上模拟一个类似样式的按钮(没有JavaScript,更不用说Sencha Touch 2了)并没有在移动设备上显示出最初的问题。

简单情况下的另一个选项(单个

<a class="attachment" href="/someRepository/someDownload.pdf">
    <img src="/images/fileExtension-pdf.png" alt="Attachment"/>
    <span class="title">Title of download</span>
    <span class="size">xxx kB</span>
</a>

 类似资料:
  • 在我的随机测试中,我看到了一个行为,我把一个锚标签放在另一个锚标签里。我做了一个jsfiddle。 但在开发人员工具中,它似乎有所不同: 我相信我们不能将锚定标记放在另一个锚定标记内,因为单击内部锚定将使单击事件冒泡到父锚定标记,这是不允许的。 我的假设正确吗?

  • 问题内容: 在我的随机测试中,我看到了一种将锚标签放在另一个锚标签内的行为。我做了一个jsfiddle。 但是在开发人员工具中,它看起来有所不同: 我相信我们不能将锚标记放在另一个锚标记内,因为单击内部锚会导致click事件冒泡到父锚标记,这是不允许的。 我的假设正确吗? 问题答案: aHTML语法禁止嵌套元素。HTML规范没有说明原因;他们只是强调规则。 从实际的角度来看,浏览器会在其解析规则中

  • 问题内容: 我想模拟对锚标签的点击,并带有所有类似正确目标处理之类的功能。 锚点的DOM对象似乎有一个[[click()] [3]“方法,但并非所有浏览器都支持。Firefox抛出此错误: 错误:anchorObj.click不是函数 它在Opera 10和Konqueror上也很奇怪,当在周围div的onclick处理函数中调用它时,会导致无限点击。我猜只有IE8可以正常工作。无论如何,我都不想

  • 我将一个点击事件绑定为document.body.onclick=function(){alert(“aaa”)}; 无论我点击什么元素,它在Android或IOS上的chrome上都很好。但在iPhone safari上,除了a和img元素外,它不会在单击元素时触发。 但在绑定touchstart事件时,它可能会冒泡到身体。 最后,我必须添加到div(#main)来包含我的所有元素,然后在这个d

  • 我试图点击一个下载链接在铬通过硒。它在页面中有许多其他链接,这些链接正在工作,但仅此下载链接就会导致超时异常。 页面中的锚定标记如下所示 如有任何建议,将不胜感激。

  • 提前感谢!