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 is equivalent to call e.preventDefault() AND e.stopPropagation()

但是,当我单击单选按钮时,我有一个显式行设置,对于Male单选按钮,该属性选中为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. 输入上的Click事件使其被选中.更好的说法,试图检查它.要实际提交此新状态并对其进行渲染,事件必须完成其生命周期而不会被阻止.然而..

2. 事件冒泡DOM树并到达父div元素,该元素附加了点击处理程序.此事件处理程序可防止默认行为,如果单选按钮(和复选框)切换为已检查状态.呼叫e.preventDefault()与return false此情况相同.

3. return false指令规定无线电输入保持未选中状态,因为根据其点击后的初始状态,它应该被检查(如果没有阻止默认值).因此return false,即使前一行检查过,也要强制无线电保持不受控制$("#m").prop('checked', true);.