Question

如我们所知，从DOM事件处理程序返回false将停止事件的传播。但我最近发现，不同元素的行为因此事件而异。例如，请考虑以下事项：

<div id="container">
   <input type="checkbox" name="foo" value="1" /> Check me!
   <br />
   <select>
      <option>1</option>
      <option>2</option>
      <option>3</option>
   </select>
   <br />
   <input type="text" size="30" />
</div>

周围的容器有一个返回false的点击处理程序：

$('#container').click(function(e) {
    $('#clicks').append('<span>clicked</span>');
    return false;
});

在div内，我仍然可以点击文本框并输入文字，仍然可以点击下拉列表来更改其值。但是点击复选框什么都不做（实际上，这不是真的 - 它会检查框，触发处理程序，然后取消选中它）。 jsfiddle：http://jsfiddle.net/4ncaq/

这种行为在浏览器中是一致的，所以我假设它是设计的。但是这里的规则究竟是什么呢？我如何知道其他类型的元素在这种情况下的行为？

Answer 1

你所看到的是传播，事件'冒泡'在DOM上，所以当你点击你的复选框时，它实际上是在#container上触发click事件（以及你可能绑定到输入或其他父项的任何事件）元件）。

像这样使用return false是不明确的，因为它一次做3件事，当你很可能只想要它做一件事时。它会阻止默认功能，暂停传播并停止进一步执行。

更好的做法是具体并使用事件对象中的方法来阻止默认操作或停止冒泡。

event.preventDefault（）将停止从锚点击加载href，停止检查复选框等内容。

event.stopPropagation（）将取消传播，这对于您的示例 - http://jsfiddle.net/4ncaq/1/

等情况非常有用

返回false的另一个问题是它可能没有被执行，我看到人们在jQuery中犯的一个常见错误是在一个带有$ .ajax（）请求的锚点上有一个click事件，然后返回false来停止浏览器从加载链接的页面。在这种情况下，如果有来自ajax（）的错误（不是响应错误，jQuery错误 - 通常是拼写错误的参数或其他东西），它将永远不会返回false;并且浏览器将加载链接的页面。使用e.preventDefault（）完全消除了这个问题。

Answer 2

单击元素时，事件将继续传播事件，直到某个处理程序决定取消传播。在这种情况下，当您单击该复选框时，它将首先引发<input>的事件，然后传播到您正在停止传播的#container。

如果要取消复选框或textareas等输入元素的传播，则应绑定到其click事件并在此时停止传播。

<强>被修改

return false也会取消原始目标元素的默认操作。复选框，链接，单选按钮是可以取消默认单击操作的一些元素。复选框中单击事件的默认操作会切换复选框的值，而选择时没有默认的单击操作，这意味着它不会被取消。

我试图找到一个没有运气的默认操作列表，但您可以查看Is there a standard resource for the "default action" of HTML elements?处的链接。

DOM / jQuery事件在输入类型之间传播差异

2 个答案: