JQuery 事件传播（return 错误）

Question

为什么点击男性单选按钮不起作用？

<div id="m_wrapper">
    <input id="m" type="radio" name="sex" value="male" />Male<br>
</div>
    <input id="f" type="radio" name="sex" value="female" />Female
    <input id="o" type="radio" name="sex" value="other" />Other


$("#m_wrapper").click(function(e){
    $("#m").prop('checked', true); 
    return false;
});

我知道这里 -> return false is equivalent to call e.preventDefault() AND e.stopPropagation()

但是，当我单击单选按钮时，我有一条显式行将男性单选按钮的属性选中设置为 true。为什么 preventDefault() 会 UNDO 我设置的东西？

顺便说一句，单击 'm_wrapper' 内的任意位置会选中单选按钮。有道理。

我知道删除 return false 可以解决问题。问题是'why?'

$("#m_wrapper").click(function(e){
    $("#m").prop('checked', true); 
    return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

<div id="m_wrapper">
    <input id="m" type="radio" name="sex" value="male" />Male<br>
</div>
    <input id="f" type="radio" name="sex" value="female" />Female
    <input id="o" type="radio" name="sex" value="other" />Other

Answer 1

单击 m_wrapper 时，您不需要 return false。事件处理程序的 return 值决定是否应该发生默认的浏览器行为。在单击 link 的情况下，这将在 link 之后。由于 div 没有默认的点击行为，您可以完全跳过它。

$("#m_wrapper").click(function(e) {
  $("#m").prop('checked', true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="m_wrapper">
  <input id="m" type="radio" name="sex" value="male" />Male<br/>
</div>  

<input id="f" type="radio" name="sex" value="female" />Female
<input id="o" type="radio" name="sex" value="other" />Other

Answer 2

这是单击 "Male" 输入按钮时发生的情况。

输入上的点击事件使其被选中。更好的说法是，尝试对其进行检查。要真正提交这个新状态并呈现它，事件必须在没有被阻止的情况下完成它的生命周期。然而..
事件在 DOM 树中冒泡并到达父 div 元素，该元素附加了点击处理程序。此事件处理程序可防止默认行为，在单选按钮（和复选框）的情况下切换选中状态。在这种情况下调用 e.preventDefault() 与 return false 相同。
return false 指令指示收音机输入保持未选中状态，因为根据其初始状态，单击后应该已选中（如果默认未选中阻止）。因此 return false 强制收音机保持未选中状态，即使前一行 $("#m").prop('checked', true); 已选中它。

JQuery 事件传播（return 错误）

JQuery event propagation (return false)

javascript

jquery

event-handling

javascript-events