HTML <label> 命令在 iPhone 浏览器中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5421659/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML <label> command doesn't work in Iphone browser
提问by arnehehe
In a html page I am making, I tried to make div's clickable using html and css. This has worked perfectly in some major browsers I have tested it in (Chrome, Firefox, Opera, Safari), as well as an HTC phone, but when I tried to test it on Iphone I noticed it just didn't work. The checkboxes themselves weren't even selectable.
在我制作的 html 页面中，我尝试使用 html 和 css 使 div 可点击。这在我测试过的一些主要浏览器（Chrome、Firefox、Opera、Safari）以及 HTC 手机中都非常有效，但是当我尝试在 Iphone 上测试它时，我发现它不起作用。复选框本身甚至无法选择。
This is my (working apart from on Iphone) code:
这是我的（除了在 Iphone 上工作）代码：
HTML:
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:
CSS：
.blocklink {
display: block;
height: 100%;
left: 0;
overflow: hidden;
position: absolute;
text-indent: -999em;
top: 0;
width: 100%;
}
So as you can see the technique I'm using is basicly just having a <label>spread all over the parent divso anywhere you click, it will tick/untick the linked checkbox.
因此，正如您所看到的，我使用的技术基本上只是<label>在整个父级上展开，div因此在您单击的任何地方，它都会勾选/取消勾选链接的复选框。
Unfortunately, this doesn't work on IPhone. Would it be possible to somehow keep using this technique but also provide IPhone support? (Preferrably without javascript, because I'm really going out of my way to only use HTML & CSS)
不幸的是，这不适用于 iPhone。是否有可能以某种方式继续使用这种技术，同时也提供 iPhone 支持？（最好没有 javascript，因为我真的很想只使用 HTML 和 CSS）
Thanks in advance,
提前致谢，
Arne
阿恩
回答by Dan Manion
Adding an empty onclick=""to the label makes the element clickable again on IOS4. It seems that by default the action is blocked or overtaken by the press and hold copy and paste text mechanics.
onclick=""在标签中添加一个空值会使元素在 IOS4 上再次可点击。似乎默认情况下，该操作被按住复制和粘贴文本机制阻止或超越。
<label for="elementid" onclick="">Label</label>
回答by Adam Widmański
The problem seems to persists in iOS9 if any html elements are contained inside a label. At least happens with span elements inside it. 'pointer-events: none' fixes it.
如果标签中包含任何 html 元素，该问题似乎仍然存在于 iOS9 中。至少发生在其中的 span 元素中。'pointer-events: none' 修复了它。
<label for="target">
<span>Some text</span>
</label>
The code above would not be trigger a change of the target input, when the user taps 'Some Text', unless you add the following css:
除非您添加以下 css，否则当用户点击“某些文本”时，上面的代码不会触发目标输入的更改：
label span {
pointer-events: none;
}
回答by Hilde
I solved it by placing an empty onclick="" on a parent element:
我通过在父元素上放置一个空的 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>
回答by Jose Camporro
For some obscure reason, using CSS, if you apply:
出于某种晦涩的原因，使用 CSS，如果您申请：
label { cursor: pointer; }
Is going to work both on iPhoneand iPad.
将适用于iPhone和iPad。
回答by matthewpavkov
I ran into a somewhat unique situation. We were already using pointer-events: noneon all spansin labels. However, we then needed to add in a <a>as clickable within one of those labels.
我遇到了一个有点独特的情况。我们已经pointer-events: none在所有spansin上使用了labels。但是，我们随后需要在<a>这些标签之一中添加可点击的。
<label>
<span>Label text here. With a <a href="http://www.google.com">link text</a> here.</span>
</label>
So, we explicitly set pointer-events: allon those <a>.
因此，我们明确设置pointer-events: all了那些<a>.
label > span { pointer-events: none; }
label > span > a { pointer-events: all; }
This is working in latest Chrome, Firefox, IE 11, and iOS 9 Safari.
这适用于最新的 Chrome、Firefox、IE 11 和 iOS 9 Safari。
回答by pjldesign
Another solution — albeit more hacky, but bulletproof —?would be to absolutely position the checkbox over the label, z-index it, increase the width/height to encompass the underlying label and then 0 the opacity. This, of course would be tedious if there are multiple labels on the page... You naturally would also only implement the absolute positioning for that media size; no need to hack the whole app environment.
另一个解决方案——虽然更笨拙，但防弹——将复选框绝对定位在标签上，z-index 它，增加宽度/高度以包含底层标签，然后将不透明度设为 0。如果页面上有多个标签，这当然会很乏味……您自然也只会实现该媒体尺寸的绝对定位；无需破解整个应用程序环境。
回答by Simon Robb
I narrowed down my problem to use of the Fastclick library; when I removed it from my codebase my issues went away, which indicates to me there isn't a native iOS/FF problem as suggested by other answers here.
我将问题缩小到使用 Fastclick 库；当我从我的代码库中删除它时，我的问题就消失了，这向我表明这里没有其他答案所建议的原生 iOS/FF 问题。
Without knowing the libraries other folks are using, but knowing that Fastclick is exceptionally common, can I suggest that the root cause of this bug is in fact a library issue - not one which has managed to persist through years of Apple releases! It seems more likely. Maybe the others here can shed some light on whether they are using Fastclick?
在不知道其他人正在使用的库的情况下，但知道 Fastclick 非常普遍，我能否建议这个错误的根本原因实际上是一个库问题 - 而不是一个在 Apple 发布多年的情况下一直存在的问题！似乎更有可能。也许这里的其他人可以说明他们是否在使用 Fastclick？
More info
更多信息
Some browsers prevent file inputs from being triggered by client code as a security measure. Try triggering a click event from the console with document.querySelector('input[type=file]').click()and it'll work, do the same from your code and it will mysteriously fail.
作为安全措施，某些浏览器会阻止客户端代码触发文件输入。尝试从控制台触发点击事件document.querySelector('input[type=file]').click()，它会起作用，从您的代码中执行相同的操作，它会神秘地失败。
I imagine the reason this bug exists is because an ontouchstarthandler is being applied to the <label />by Fastclick. When it is triggered on a touch device, the library will proxy that event to the onclickhandler, or in this case the native <label />functionality. Unfortunately, this means that client code is triggering the file input opening, and it's being blocked by the browser.
我想这个错误存在的原因是因为Fastclickontouchstart正在将一个处理程序应用到<label />。当它在触摸设备上被触发时，库会将该事件代理给onclick处理程序，或者在这种情况下是本机<label />功能。不幸的是，这意味着客户端代码正在触发文件输入打开，并且被浏览器阻止。
回答by Enyby
If you change DOM on event handler (example in onMouseEnter) this cause skip all next handlers include onClick.
如果您在事件处理程序（onMouseEnter 中的示例）上更改 DOM，则会导致跳过所有包含 onClick 的下一个处理程序。
SetTimeout don't fix this.
SetTimeout 不能解决这个问题。
Example: 1. in onMouseEnter use setTimeout with function injected new div in DOM 2. any onClick handler don't called.
示例： 1. 在 onMouseEnter 中使用 setTimeout 和在 DOM 中注入新 div 的函数 2. 不调用任何 onClick 处理程序。
Solution: avoid change DOM in events handler.
解决方案：避免在事件处理程序中更改 DOM。
Remark: it problem found for label tag, but still persist for span inside label. May be this problem present on any type tags.
备注：标签标签出现问题，但标签内的跨度仍然存在。任何类型的标签都可能存在此问题。
This behavuor found only for mobile iOS. In desktop Safari and in Mac OS Safari - all ok.
此行为仅适用于移动 iOS。在桌面 Safari 和 Mac OS Safari 中 - 一切正常。
