Question

在我正在制作的html页面中，我尝试使用html和css使div可点击。这在我测试过的一些主要浏览器（Chrome，Firefox，Opera，Safari）以及HTC手机中都运行得很好，但是当我尝试在Iphone上测试它时，我注意到它只是不起作用。复选框本身甚至无法选择。

这是我（在Iphone上除外）代码：

HTML：

<div class="" style="height: 30px;">
        <div style="display: table; width: 100%;">
        <div style="display: table-row; width: 100%;">
        <div style="display: table-cell;">
        <label for="3171">Text....</label>
        </div>

        <div style="display: table-cell; text-align: right;">
        <input type="checkbox" id="3171" name="3171">
        </div>
        </div>
        </div>
        <label for="3171">
        <span class="blocklink">Invisible text</span>
        </label>
        </div>

CSS：

.blocklink {
    display: block;
    height: 100%;
    left: 0;
    overflow: hidden;
    position: absolute;
    text-indent: -999em;
    top: 0;
    width: 100%;
}

因为你可以看到我正在使用的技术基本上只是<label>遍布父div，所以无论你点击什么，它都会勾选/取消勾选链接的复选框。

不幸的是，这不适用于iPhone。有可能以某种方式继续使用这种技术，但也提供IPhone支持？（最好没有javascript，因为我真的不想使用HTML和CSS）

提前致谢，

·阿尔

Answer 1

在标签上添加空onclick=""会使元素在IOS4上再次点击。似乎默认情况下，操作被按下或超过按住并保持复制和粘贴文本机制。

<label for="elementid" onclick="">Label</label>

Answer 2

如果标签中包含任何html元素，iOS9中的问题似乎仍然存在。至少发生在其中的span元素。 'pointer-events：none'修复了它。

<label for="target">
  <span>Some text</span>
</label>

当用户点击“Some Text”时，上面的代码不会触发目标输入的更改，除非您添加以下css：

label span {
  pointer-events: none;
}

Answer 3

我通过在父元素上放置一个空的onclick =“”来解决它：

<form onclick="">
    <input type="radio" name="option1" value="1">
    <label for="option1">Option 1</label>

    <input type="radio" name="option2" value="2">
    <label for="option2">Option 2</label>

    <input type="radio" name="option3" value="3" checked="checked">
    <label for="option3">Option 3</label>
</form>

Answer 4

出于某些不明原因，使用CSS，如果你申请：

label { cursor: pointer; }

可以在 iPhone 和 iPad 上同时使用。

Answer 5

另一个解决方案 - 尽管更多hacky，但是防弹 - 将绝对定位在标签上，z-index它，增加宽度/高度以包含底层标签，然后是0不透明度。如果页面上有多个标签，这当然会很繁琐......你自然也只会实现该媒体大小的绝对定位;无需破解整个应用程序环境。

Answer 6

我遇到了一个有点独特的情况。我们已在pointer-events: none中的所有spans上使用labels。但是，我们需要在其中一个标签中添加<a>可点击。

<label>
    <span>Label text here. With a <a href="http://www.google.com">link text</a> here.</span>
</label>

因此，我们在pointer-events: all上明确设置了<a>。

label > span { pointer-events: none; }
label > span > a { pointer-events: all; }

这适用于最新的Chrome，Firefox，IE 11和iOS 9 Safari。

Answer 7

如果您在事件处理程序上更改DOM（onMouseEnter中的示例），则此原因会跳过所有下一个处理程序，包括onClick。

SetTimeout不解决这个问题。

实施例： 1.在onMouseEnter中使用setTimeout，并在DOM中注入新的div 2.任何onClick处理程序都不会调用。

解决方案：避免在事件处理程序中更改DOM。

备注：标签标签发现问题，但仍然存在标签内的跨度。可能是任何类型标签上存在此问题。

此行为仅适用于移动iOS。在桌面Safari和Mac OS Safari中 - 一切正常。

Answer 8

我缩小了使用Fastclick库的问题;当我从我的代码库中删除它时，我的问题就消失了，这表明我没有其他答案所建议的原生iOS / FF问题。

在不知道其他人正在使用的库的情况下，但是我知道Fastclick非常常见，我能否指出这个bug的根本原因实际上是一个库问题 - 而不是一个已经设法坚持多年Apple版本的问题！似乎更有可能。也许这里的其他人可以了解他们是否使用Fastclick？

更多信息

某些浏览器会阻止客户端代码触发文件输入作为安全措施。尝试使用document.querySelector('input[type=file]').click()从控制台触发点击事件并且它可以正常工作，从您的代码执行相同操作，它将神秘地失败。

我想这个错误存在的原因是因为Fastclick正在将ontouchstart处理程序应用于<label />。在触摸设备上触发时，库会将该事件代理到onclick处理程序，或者在本例中是本机<label />功能。不幸的是，这意味着客户端代码正在触发文件输入打开，并且被浏览器阻止。

HTML <label>命令在Iphone浏览器中不起作用</label>

8 个答案: