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;
});

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

然而，当我点击单选按钮时，我有一个显式行设置，对于Male单选按钮，该属性选中为true。为什么preventDefault()会UNDO我设置的内容？

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

我知道删除return false会解决问题。问题是＆＃39;为什么？＆＃39;

＆＃13;

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

＆＃13;

<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

＆＃13;

Answer 1

单击“男性”输入按钮时会发生这种情况。

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

Answer 2

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

＆＃13;

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

＆＃13;

<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

＆＃13;

JQuery事件传播（返回false）

2 个答案: