跨越锚标记阻止在iPhone上用于Safari的tap事件

Question

我在基于Sencha Touch 2的移动应用程序中设计了类似于按钮的普通链接,而且我遇到的问题是大多数链接在iPhone上的Safari中无法正常工作.

该链接是一个普通<a>标签,内部<span>元素包含标签文本.<a>元素上有填充,允许注册点击.似乎内部<span>阻止了点击在父锚中作为链接点击注册,其背景是透明的.

这是标记:

<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中进行测试不会出现任何问题,即单击跨度会导致遵循父超链接.两者都是基于Webkit的浏览器.我们的一位测试人员也在Safari上用Macbook测试了这一点,没有任何问题; 我还使用Wacom Bamboo平板电脑在Chrome中对此进行了测试,没有任何问题.这只是移动设备上的一个问题(在iPhone和Android 2.2上都经过测试) - 这就是我们的目标.

我可以在<span>元素上设置一个CSS属性,以允许点击通过父超链接吗？理想情况下,我希望避免通过JavaScript设置事件.关于为什么这不符合我的预期的任何想法？

更新:以下是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;    

非常感谢.

Answer 1

解决了它,感谢这篇帖子提到了以下CSS属性:

pointer-events: none;

将其添加到内部的样式<span>(以及<img>在我的第二个注释中提到的内部浮动)允许这些将其传递到父超链接.

奇怪的是,Sencha Touch 2似乎干扰了DOM,不确定它是什么特别的.在完全静态的HTML页面上模拟类似风格的按钮(没有JavaScript,更不用说Sencha Touch 2)在移动设备上没有出现原始问题.

在简单情况下(单个<span>,没有浮动图像)的另一个选项是重构样式以消除对内部的需要<span>,尽管这对于更复杂的情况是不可行的:

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