点击<标签>在Mobile Safari中

Tapping on <label> in Mobile Safari

本文关键字：Safari Mobile 标签 lt 点击 gt      更新时间：2023-09-26

点击<label>不会在Mobile Safari中自动对焦链接，但如果定义了作为点击处理程序的空函数像这个

document.getElementById("test_label").onclick = function () {};

解决了问题。

这是完整的源代码。

<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>

你知道为什么它有效吗？

使用FastClick:的用户

使用此CSS:

label > * {
    display: block;
    pointer-events: none;
}

请参阅此问题：https://github.com/ftlabs/fastclick/issues/60

和这个代码笔：http://codepen.io/visnup/pen/XJNvEq

我们只需将这一行代码添加到我们的全局javascript文件中，就可以在Etsy解决这个问题。

$('label').click(function() {});

我们使用的是xui-micro-js库，这一行只是将一个空的点击处理程序附加到所有label元素。出于某种原因，这神奇地解决了移动狩猎的问题。

看起来您在iOS Safari中发现了一个错误。祝贺发现和报告错误会让人上瘾。

您可以在上向Apple报告此错误和其他错误https://bugreport.apple.com/.苹果可能不会立即跟进，但在未来的某个时候，他们应该通知你，这是现有错误的复制品，他们不认为这是错误，或者(如果你幸运的话(你应该在新版本的iOS中再次测试它。

同时，坚持这个变通方法——你需要它。

<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>

要在标签标签的任何地方启用iOS上的点击，您需要向其直接子项添加指针事件(期望输入(：none；

.name-checkbox, .some-info {
      pointer-events: none;
    }

我知道这不是一个很好的标记：我只是在每个标签上硬编码了一个空的onclick，比如onclick=""。这在包装标签上起到了作用：

<label for="myID" onclick="">
 <input type="checkbox" id="myID" name="myNAME">
 Check to check
</label>

在iOS 7中，这个问题仍然存在，没有任何解决方法。

我的解决方案是将click事件与touchend:相结合

var handler = function(e) { /* do stuff */ };
$("ol input[type=checkbox] ~ label")
  .on('touchend', handler)
  .on('click', handler);

JQuery问题中的一些有用信息：http://bugs.jquery.com/ticket/5677特别是它在技术上说移动设备上没有click事件的部分。

添加onclick属性可以解决这个问题。 
<label for="test" id="test_label" onclick="">

或者你可以让for="，并在点击标签时进行焦点输入，这里是react 中的代码工作

<input ref={(node) => { this.input = node; }} />
<label htmlFor="" onClick={() => { this.input.focus();}}/>

如果已经有一个onclick属性，就不应该覆盖它，在我的测试中，它起了作用(onclick特性(，并单击了复选框。所以我的解决方案是：

<script type="text/javascript">
    var labels = document.getElementsByTagName("LABEL");
    var labels_l = labels.length;
    for(var l = 0; l < labels_l; l++){
        if(labels[l].hasAttribute("for") && (!labels[l].hasAttribute("onclick"))){
            labels[l].onclick = function () {};
        }
    }
</script>

我刚刚解决了类似的问题：

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
}

一些非常奇怪的行为发生在我身上，上面的任何一个都无法解决。如果我在label元素中放置了文本或图像，那么点击该元素就无法工作。然而，当我在标签上添加边距和填充时，点击边距或填充但不点击文本/图像确实有效。所以，我所做的是使标签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>
相关文章：