移动野生动物园还是jquery BUG？在 html 标签上，单击= " " 并且 click() 失败

Question

我发现，以下代码确实可以

<label onclick="alert('alert')">
<input id="testinput" type="radio" name="test" autocomplete="off" />
clicktest
</label>

但以下内容并非如此。

<label for="testinput" onclick="alert('alert')">clicktest</label>
<input id="testinput" type="radio" name="test" autocomplete="off" />

我使用的是jquery.3.3.1.min。为了澄清，只有编码的点击事件不起作用，而与输入的本地交互起作用。

同样的结果，如果我尝试使用设置点击事件

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

对于那些遇到同样问题的人，这里有我的解决方法，它显然只针对input[type="radio"]的使用，并在无线电输入改变时读取点击标签的结果：

$('section.tabbox input[type=radio]').change(function(){
var el = $(this);
if (el.is(':checked')) {
var tbb = el.closest('section.tabbox');
var index = tbb.find('input[type=radio]').index(el);
//--- do more stuff with index
//--- e.g. $('section.tabbox').find('label:eq('+index+').addClass('clicked')
}
});

但是，如果inputs属性已经是:checked，但您需要标签上的单击事件，该怎么办？只需更改两次：-)

$(thisinput).prop('checked',false).prop('checked',true)

我只在iPad mini上的移动safari中发现了这种行为，其他浏览器似乎没有受到影响。这是safari还是jquery中的bug？

Answer 1

希望我找到的这个解决方案将来会稳定(如有必要，会发布更新)。

我发现

• 桌面Firefox和桌面Safari在点击label后不要点击input type="radio"

• 桌面Chrome启动两个，单击label事件并聚焦/单击input

• mobileSafari仅在input上触发点击事件。

这是我的解决方案，它可以使用navigator.userAgent，并且只有在用户代理检测到移动Safari时才接受输入[type=radio]上的点击事件(欢迎改进)。此函数从相关标签(通过其for-属性)收集onclick="..."和.click(...)事件，并通过程序触发它。

$('input[type=radio]').on('click focus',function(){
var el = $(this);
el.blur();
if (/iPhone|iPad|iPod/i.test(navigator.userAgent) && /AppleWebKit/i.test(navigator.userAgent)) {    
$('label[for='+el.attr('id')+']').trigger('click');
}
});

这似乎是一个值得注意的变通方法。

更新2017/01/03

取消了focus表示法，因为它没有意义。现在只使用click表示法，现在还包括测试，如果存在具有匹配for-属性的label。这个检查对我来说似乎很重要，因为两种html标记的可能性(见上面问题的开头)可能会出现在同一页面上：

$('input[type=radio]').on('click',function(){
var el = $(this);
var label = $('label[for='+el.attr('id')+']');
if (label.length && /iPhone|iPad|iPod/i.test(navigator.userAgent) && /AppleWebKit/i.test(navigator.userAgent)) {    
label.trigger('click');
}
});

干杯