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

Question

我有以下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）中，它运行良好。 检查小提琴

我也尝试使用event.stopPropagation()来解决事件冒泡，但是它没有帮助。 检查小提琴

有什么办法解决这个问题？

Answer 1

点击是冒泡的事件。 您可能想看一下MDN的JavaScript文档中有关事件冒泡的信息。 http://javascript.info/tutorial/bubbling-and-capturing

event.stopPropagation()应该防止它发生。 停止传播文档