javascript 在 Mobile Safari 中点击 <label>
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7358781/
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
Tapping on <label> in Mobile Safari
提问by Viktor
Tapping on <label>does not auto-focus linked in Mobile Safari but If an empty function as clickhandler is defined
like this
<label>在 Mobile Safari 中点击不会自动对焦，但是如果像这样定义了一个空函数作为 clickhandler
document.getElementById("test_label").onclick = function () {};
solves the problem.
解决了这个问题。
This is the full source code.
这是完整的源代码。
<body>
<input type="checkbox" id="test" name="test">
<label for="test" id="test_label">This is the label</label>
<script>
document.getElementById("test_label").onclick = function () {};
</script>
</body>
Do you know why it works?
你知道它为什么有效吗？
采纳答案by s4y
It looks like you found a bug in iOS Safari. Congratulations! Finding and reporting bugs is addictive.
您似乎在 iOS Safari 中发现了一个错误。恭喜！查找和报告错误会让人上瘾。
You can report this and other bugs to Apple at https://bugreport.apple.com/. Apple might not follow up immediately, but at some point in the future they should notify you that it was a duplicate of an existing bug, that they don't consider it a bug, or (if you're lucky) that you should test it again in a new version of iOS.
您可以在https://bugreport.apple.com/ 上向 Apple 报告此错误和其他错误。Apple 可能不会立即跟进，但在未来的某个时候，他们应该通知您这是现有错误的重复，他们不认为这是一个错误，或者（如果幸运的话）您应该进行测试在新版本的 iOS 中再次使用它。
In the mean time, hold onto this workaround —?you'll need it.
与此同时，坚持这个变通方法——你会需要它。
回答by maikel
People using FastClick:
使用 FastClick 的人：
Use this CSS:
使用这个 CSS：
label > * {
display: block;
pointer-events: none;
}
see this issue: https://github.com/ftlabs/fastclick/issues/60
看到这个问题：https: //github.com/ftlabs/fastclick/issues/60
and this codepen: http://codepen.io/visnup/pen/XJNvEq
和这个代码笔：http://codepen.io/visnup/pen/XJNvEq
回答by Ramin B.
We were able to work around this issue at Etsy by simply adding this single line of code to our global javascript file.
我们能够在 Etsy 解决这个问题，只需将这行代码添加到我们的全局 javascript 文件中即可。
$('label').click(function() {});
We are using the xui micro js library and that line simply attaches an empty click handler to all labelelements. For some reason, this magically fixes the issue on mobile safari.
我们正在使用 xui micro js 库，该行只是将一个空的点击处理程序附加到所有label元素。出于某种原因，这神奇地解决了移动 safari 上的问题。
回答by Julien Pecorino
<label for="myID" onclick="">
<input type="checkbox" id="myID" name="myNAME">
<span class="name-checkbox"> My name for my checkbox </span>
<span class="some-info">extra informations below</span>
</label>
To enable the tap on iOS everywhere on the label tag, you need to add to its direct children (expect input), pointer-events: none;
要在标签标签上的任何地方启用 iOS 上的点击，您需要添加到它的直接子项（期望输入），pointer-events: none;
.name-checkbox, .some-info {
pointer-events: none;
}
回答by Frank L?mmer
i know it's not really nice markup: I just hardcoded an empty onclick like this onclick=""on each label. That worked on a wrapping label:
我知道这不是很好的标记：我只是onclick=""在每个标签上硬编码了一个像这样的空 onclick 。这适用于包装标签：
<label for="myID" onclick="">
<input type="checkbox" id="myID" name="myNAME">
Check to check
</label>
回答by Dex
In iOS 7, this issue still persists without any of the workarounds working for me.
在 iOS 7 中，如果没有任何对我有用的解决方法，这个问题仍然存在。
My solution was to combine the clickevent with touchend:
我的解决方案是将click事件与touchend：
var handler = function(e) { /* do stuff */ };
$("ol input[type=checkbox] ~ label")
.on('touchend', handler)
.on('click', handler);
Some helpful info in this JQuery issue: http://bugs.jquery.com/ticket/5677Especially the part where it says technically there is no clickevent on mobile.
此 JQuery 问题中的一些有用信息：http: //bugs.jquery.com/ticket/5677特别是它说从技术上讲click在移动设备上没有事件的部分。
回答by Yun C Han
adding onclick attribute would fix the problem.
添加 onclick 属性将解决该问题。
<label for="test" id="test_label" onclick="">
回答by hui chen
or you can let for="", and focus input when click the label, here is the code work in react
或者你可以让 for="", 并在点击标签时聚焦输入，这是反应中的代码
<input ref={(node) => { this.input = node; }} />
<label htmlFor="" onClick={() => { this.input.focus();}}/>
回答by Steffan Perry
Some really odd behavior has been happening for me where none of the above would fix it. If I had place text or images inside the label element, clicking on that element did not work. However when i added margin and a padding to the label, clicking on the margin or padding but not on the text/images did work. So what I did was make the label a 100% w 100% h absolutely positioned over my text & images.
我发生了一些非常奇怪的行为，上面的任何一个都不能解决它。如果我在标签元素内放置了文本或图像，则单击该元素不起作用。但是，当我向标签添加边距和填充时，单击边距或填充而不是文本/图像确实有效。所以我所做的是让标签 100% w 100% h 绝对定位在我的文本和图像上。
<div class="wrapper">
<label class="label-overlay" for="file"></label>
<img src="something.png">
<p>Upload File</p>
<input type="file" name="file">
</div>
<style>
.wrapper{display:inline-block;}
.label{position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer;}
</style>
回答by Alex Bohariuc
I just solved my similar problem like this:
我刚刚解决了我类似的问题：
input {
position: absolute;
width: 120px; // size of my image
height: 100px; // size of my image
opacity: 0;
display: inherit; // Because i'm hidding it on other resolutions
}
