在iPhone上的Safari标记块内部跨越点击事件(Span inside anchor tag blocks tap event for Safari on iPhone)

我在我们基于Sencha Touch 2的移动应用程序中设计了一个类似于按钮的普通链接，并且我遇到了大多数链接在iPhone上的Safari中无法运行的问题。

该链接是一个普通的<a>标签，其中包含标签文本的内部元素。在<a>元素上有填充<a> ，它允许注册龙头。看起来，内部阻止在父锚中注册为轻击链接，其背景是透明的。

这是标记：

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

在Chrome中进行测试不会出现任何问题，即单击该跨度会导致遵循父超级链接。两者都是基于Webkit的浏览器。我们的一位测试人员也在Macbook上的Safari中对此进行了测试，没有任何问题; 我也使用Wacom Bamboo平板电脑在Chrome中进行了测试，没有任何问题。这只是移动设备上的一个问题（在iPhone和Android 2.2上测试） - 这正是我们的目标。

是否有一个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;

非常感谢。

I've styled an ordinary link to resemble a button in our Sencha Touch 2-based mobile application, and I'm having issues with most of the link not functioning in Safari on the iPhone.

The link is an ordinary <a> tag with an inner element containing the label text. There is padding on the <a> element, which allows taps to be registered. It appears that the inner is blocking taps from being registered in the parent anchor as a link tap, and its background is transparent.

Here's the markup:

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

Testing this in Chrome doesn't present any problems, i.e. clicking the span causes the parent hyperlink to be followed. Both are Webkit-based browsers. One of our testers also tested this in Safari on a Macbook with no problems; I have also tested this in Chrome using a Wacom Bamboo tablet with no problems. This is only an issue on mobile devices (tested on both iPhone and Android 2.2) - which is what we're targeting.

Is there a CSS property I can set on the element to allow taps to fall through to the parent hyperlink? Ideally I want to avoid having to set events through JavaScript. Any ideas as to why this isn't working as I'd expect?

Update: Here are the styles for the inner span as reported by Chrome's developer console:

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

Many thanks.

最满意答案

解决它，感谢这篇文章提到了以下CSS属性：

pointer-events: none;

将这添加到内部 （以及我在第二条评论中提到的内部浮动<img>的样式中时，它们允许这些将水龙头传递给父级超链接。

奇怪的是，Sencha Touch 2似乎干扰了DOM，不确定它是什么。在完全静态的HTML页面上嘲弄类似样式的按钮（没有JavaScript，更不用说Sencha Touch 2了）并没有在移动设备上出现原始问题。

在简单情况下（单 ，没有浮动图像）的另一种选择是重构样式以消除对内部的需要，尽管这对于更复杂的情况不可行：

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

Solved it, thanks to this post which mentions the following CSS property:

pointer-events: none;

Adding this to the style for the inner (and inner floated <img> as alluded to in my second comment) allowed these to pass the tap through to the parent hyperlink.

The strange thing is that Sencha Touch 2 seemed to interfere with the DOM, not sure what it was in particular. Mocking up a similarly-styled button on a completely static HTML page (no JavaScript, let alone Sencha Touch 2) did not exhibit the original problem on a mobile device.

Another option in the simple case (single , no floated images) was to refactor the styles to eliminate the need for an inner , though this wasn't feasible for the more complicated case:

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

更多推荐