为什么在 Safari 中单击/聚焦子文本框时会自动触发父元素单击事件？答案

【问题标题】：Why parent element click event fires automatically when child textbox is clicked/focus in Safari?为什么在 Safari 中单击/聚焦子文本框时会自动触发父元素单击事件？
【发布时间】：2016-02-24 12:49:38
【问题描述】：

我有以下 HTML 结构

[Checkbox] [Text] [Input element (Show if check-box is checked)]

<span class='spGrpContainer'>
  <label id='stepGH_Group1' class='lblStep GHSteps lblGroupheader' stepid='1' stepname='Group1' childcontainer='ulGH_grp1Steps'>
    <label><input type='checkbox' onchange="Javascript:HideUnHideSubItems();" /><span class='sptext spGHStepName'>Check Me</span></label>
    <label class='lblRanking' style='display: none;'><input id='rnkbox_Scr' class='txtImportance' type='number' min='0' max='100' step='1' value='' /></label>
  </label>
</span>

当输入元素点击时，复选框自动隐藏在Safari browser中。在 Chrome、IE、Firefox 等所有其他主流浏览器中，它运行良好。 Check Fiddle

我也试过event.stopPropagation() 来解决事件冒泡，但它没有帮助。 Check Fiddle

有没有办法解决这个问题？

【问题讨论】：

也许你需要event.stopPropagation()
@Tushar：我尝试了“event.stopPropagation()”方法，但它对我不起作用。检查小提琴：jsfiddle.net/wgnecsfo/16

标签： javascript jquery html safari

【解决方案1】：

点击是一个冒泡的事件。您可能想查看 MDN 的 JavaScript 文档，了解事件冒泡。 http://javascript.info/tutorial/bubbling-and-capturing

event.stopPropagation() 应该防止它发生。 Stop propagation documentation

【讨论】：

是的，我尝试使用“event.stopPropagation()”方法，但它对我不起作用。检查小提琴：jsfiddle.net/wgnecsfo/16
我想，我在这里错了。因为当我们发出警报时，“event.stopPropagation()”正在使用。检查小提琴：jsfiddle.net/wgnecsfo/17。你能帮助/建议在没有警报的情况下工作吗？