HTML <label>命令在Iphone浏览器中不起作用
在我正在做的一个HTML页面，我试图让div的可点击使用HTML和CSS。 这已经在我已经testing过的一些主stream浏览器（Chrome，Firefox，Opera，Safari）以及HTC手机上完美运行，但是当我试图在Iphone上testing它时，我发现它不起作用。 checkbox本身甚至不可选。
这是我的（除了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所以你点击任何地方，它会勾选/取消链接checkbox。
不幸的是，这不适用于iPhone。 有可能以某种方式继续使用这种技术，但也提供iPhone支持？ （最好没有JavaScript，因为我真的只是使用HTML和CSS的方式）
提前致谢，
阿恩
向标签添加一个空的onclick=""使元素在IOS4上再次可点击。 看起来默认情况下，这个动作是被压制或者被压制并被复制和粘贴的文本机制所超越。
<label for="elementid" onclick="">Label</label>
如果任何html元素包含在标签内，问题似乎仍然存在于iOS9中。 至less发生在里面的span元素。 “指针事件：无”修复它。
<label for="target"> <span>Some text</span> </label>
上面的代码不会触发目标input的更改，当用户点击“某些文本”时，除非添加以下css：
label span { pointer-events: none; }
我通过在父元素上放置一个空的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>
由于一些不太明确的原因，使用CSS，如果你申请：
label { cursor: pointer; }
即将在iPhone和iPad上工作。
我遇到了一个独特的情况。 我们已经在labels所有spans上使用了pointer-events: none 。 但是，我们需要在<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的工作。
如果你改变事件处理程序的DOM（例如在onMouseEnter）这个原因跳过所有下一个处理程序包括onClick。
SetTimeout不解决这个问题。
例如：1.在onMouseEnter中使用setTimeout函数在DOM 2中注入新的div。任何onClick处理函数都不会被调用。
解决scheme：避免在事件处理程序中更改DOM
注：标签标签发现问题，但仍然在标签内持续存在。 可能是任何types标签上存在这个问题。
此行为仅适用于移动iOS。 在桌面Safari和Mac OS Safari中 – 一切正常。
另一个解决scheme – 尽pipe比较笨拙，但也是防弹的 – 将绝对定位在标签上的checkbox，Z – 索引它，增加宽度/高度包含底层标签，然后是不透明度。 当然，如果页面上有多个标签，这当然是乏味的。你自然也只会实现那个媒体大小的绝对定位。 无需破解整个应用程序环境。
我缩小了我的问题使用Fastclick库; 当我从我的代码库中删除它时，我的问题消失了，这对我来说没有像本文其他答案所build议的本机iOS / FF问题。
在不知道其他人正在使用的库的情况下，知道Fastclick是非常常见的，我能否build议这个错误的根本原因实际上是一个图书馆的问题 – 而不是一个通过多年的苹果发布持续存在的问题！ 这似乎更可能。 也许这里的其他人可以阐明他们是否使用Fastclick？
更多信息
某些浏览器阻止文件input被客户端代码触发，作为安全措施。 尝试使用document.querySelector('input[type=file]').click()从控制台触发一个点击事件，它会起作用，在你的代码中做同样的事情，它会神秘地失败。
我想这个bug存在的原因是因为一个ontouchstart处理程序被Fastclick应用到<label /> 。 当它在触摸设备上被触发时，库将把该事件代理到onclick处理程序，或者在本例中是本地的<label />function。 不幸的是，这意味着客户端代码正在触发文件input打开，并被浏览器阻止。
