javascript - JQuery 事件传播(返回 false)

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 等同于调用 e.preventDefault() AND e.stopPropagation()

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

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

我知道删除 return false 会解决这个问题。问题是“为什么？”

$("#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

这是当您点击“男性”输入按钮时发生的情况。

1. 输入上的点击事件使其被选中。更好的说法是，尝试检查它。要真正提交这个新状态并呈现它，事件必须在没有被阻止的情况下完成它的生命周期。然而..

2. 事件在 DOM 树中向上冒泡，到达附加了点击处理程序的父 div 元素。此事件处理程序可防止默认行为，在单选按钮(和复选框)的情况下切换选中状态。在这种情况下，调用 e.preventDefault() 与 return false 相同。

3. return false 指令指示 radio 输入保持未选中状态，因为根据其初始点击后的状态，它应该被选中(如果未阻止默认设置)。所以 return false 强制 radio 保持未选中状态，即使前一行 $("#m").prop('checked', true); 已选中它。