JQuery事件传播（返回false）

Question

JQuery事件传播（返回false）

javascriptjqueryevent-handlingjquery-events

8

为什么点击男性单选按钮没有反应？

<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()

然而，当我单击单选按钮时，我有一行明确设置将属性 checked 设置为 true 的 Male 单选按钮。为什么 preventDefault() 会 撤销 我设置的内容？

顺便说一下，在 '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

- Cacho Santa

2个回答

1

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

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

- MaxZoom

不，它没有。请特别点击单选按钮圆圈，它不会被选中。 - Cacho Santa

1

这不是一个答案。 - AmmarCSE

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- dfsq · Accepted Answer

当您单击“男性”输入按钮时，会发生以下情况：

点击事件将其标记为选中状态。更确切地说，是尝试将其标记为选中状态。要实际提交新状态并呈现它，事件必须在未被阻止的情况下完成其生命周期。但是...
事件在DOM树中向上传递，并到达具有附加点击处理程序的父div元素。此事件处理程序会阻止默认行为，对于单选按钮（和复选框）而言，它是切换选中状态。在这种情况下，调用e.preventDefault()相当于return false。
return false指令说明单选按钮仍然保持未选中状态，因为根据其初始状态，单击后应变为选中状态（如果未防止默认操作）。因此，return false强制单选按钮保持未选中状态，即使前一行$("#m").prop('checked', true);将其选中。