9

我将一个普通链接设置为类似于我们基于 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 的浏览器。我们的一位测试人员还在 Macbook 上的 Safari 中进行了测试，没有出现任何问题；我还使用 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;

非常感谢。

4

2 回答 2

11

解决了这个问题，感谢这篇文章提到了以下 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>
于 2012-06-06T04:08:14.763 回答
0

我认为这与 Sencha Touch 防止缩放有关。他们在代码中添加了防止默认大多数 touchstart 事件（这会终止链接的使用）。锚点有一个例外，但锚点的子节点没有（因此点击锚点本身可以​​正常工作，但不能点击锚点内的跨度）。我能够在我的应用程序启动方法中对 quickfix 进行修补：

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

于 2012-06-06T15:25:13.163 回答