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

Question

I have following HTML structure

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

When input element click, the checkbox is automatic hide in Safari browser . In all other major browser like Chrome, IE, Firefox it's working nice. Check Fiddle

I also tried event.stopPropagation() for resolving event bubbling, but its didn't helpful. Check Fiddle

Is there any way to resolve this issue?

Answer 1

Click is an event that bubbles up. You might want to take a look at the JavaScript Documentation by MDN about event bubbling. http://javascript.info/tutorial/bubbling-and-capturing

event.stopPropagation() should prevent it from happening. Stop propagation documentation