jQuery事件处理return false与event.preventDefault()

http://blog.csdn.net/a33440521/article/details/9109909

event.preventDefault()方法是用于取消事件的默认行为，但此方法并不被ie支持，在ie下需要用window.event.returnValue = false; 来实现。

这不是JQuery的方法，是JS本身自带的

event.preventDefault()
该方法将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作）。例如，如果 type 属性是 "submit"，在事件传播的任意阶段可以调用任意的事件句柄，通过调用该方法，可以阻止提交表单。注意，如果 Event 对象的 cancelable 属性是 fasle，那么就没有默认动作，或者不能阻止默认动作。无论哪种情况，调用该方法都没有作用。

event.stopPropagation()
该方法将停止事件的传播，阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。注意，虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用，但是它可以阻止把事件分派到其他节点。

event是DOM的事件方法，所以不是单独使用，比如指定DOM

在jQuery代码中，我们常见用return false来阻止浏览器的默认行为。例如点击链接，浏览器默认打开一个新窗口/标签，为了阻止浏览器的默认行为，我们往往这样操作：

<span class="pln" style="color:rgb(0,0,0)">$</span><span class="pun" style="color:rgb(102,102,0)">(</span><span class="str" style="color:rgb(0,136,0)">"a.toggle"</span><span class="pun" style="color:rgb(102,102,0)">).</span><span class="pln" style="color:rgb(0,0,0)">click</span><span class="pun" style="color:rgb(102,102,0)">(</span><span class="kwd" style="color:rgb(0,0,136)">function</span><span class="pun" style="color:rgb(102,102,0)">()</span><span class="pln" style="color:rgb(0,0,0)"> </span><span
10469
class="pun" style="color:rgb(102,102,0)">{</span><span class="pln" style="color:rgb(0,0,0)">
$</span><span class="pun" style="color:rgb(102,102,0)">(</span><span class="str" style="color:rgb(0,136,0)">"#mydiv"</span><span class="pun" style="color:rgb(102,102,0)">).</span><span class="pln" style="color:rgb(0,0,0)">toggle</span><span class="pun" style="color:rgb(102,102,0)">();</span><span class="pln" style="color:rgb(0,0,0)">
</span><span class="kwd" style="color:rgb(0,0,136)">return</span><span class="pln" style="color:rgb(0,0,0)"> </span><span class="kwd" style="color:rgb(0,0,136)">false</span><span class="pun" style="color:rgb(102,102,0)">;</span><span class="pln" style="color:rgb(0,0,0)">
</span><span class="pun" style="color:rgb(102,102,0)">});</span>

这段代码的作用是通过点击toggle来隐藏或显示#mydiv，并阻止浏览器继续访问href指定链接。测试如下：

click toggle
点击上一行的toggle，这段文字将被显示或隐藏。

return false达到了我们想要的目的，但这并不是阻止浏览器执行默认行为的正确方法。调用return false，它实际完成了3件事：
event.preventDefault()
event.stopPropagation()
停止回调函数执行并立即返回。
我们真正的目的是event.preventDefault()，后两者可不是我们想要的。JavaScript事件有两种，一种称为事件冒泡（event bubbling），一种称为事件捕捉（event capturing）。事件冒泡指事件在初始DOM上触发，通过DOM树往上在每一级父元素上触发；当事件向下冒泡时，我们则称之为事件捕获。
因为return false多做了两件事，由此为代码埋下隐患。下面有一个简单的例子，点击一个链接，加载新的页面内容到当前页面：

<span class="tag" style="color:rgb(0,0,136)"><div</span><span class="pln" style="color:rgb(0,0,0)"> </span><span class="atn" style="color:rgb(102,0,102)">class</span><span class="pun" style="color:rgb(102,102,0)">=</span><span class="atv" style="color:rgb(0,136,0)">"post"</span><span class="tag" style="color:rgb(0,0,136)">></span><span class="pln" style="color:rgb(0,0,0)">
</span><span class="tag" style="color:rgb(0,0,136)"><a</span><span class="pln" style="color:rgb(0,0,0)"> </span><span class="atn" style="color:rgb(102,0,102)">href</span><span class="pun" style="color:rgb(102,102,0)">=</span><span class="atv" style="color:rgb(0,136,0)">"/js/loadp1.txt"</span><span class="tag" style="color:rgb(0,0,136)">></span><span class="pln" style="color:rgb(0,0,0)">Click here to load page1</span><span class="tag" style="color:rgb(0,0,136)"></a></span><span class="pln" style="color:rgb(0,0,0)">
</span><span class="tag" style="color:rgb(0,0,136)"><div</span><span class="pln" style="color:rgb(0,0,0)"> </span><span class="atn" style="color:rgb(102,0,102)">class</span><span class="pun" style="color:rgb(102,102,0)">=</span><span class="atv" style="color:rgb(0,136,0)">"content"</span><span class="tag" style="color:rgb(0,0,136)">></span><span class="pln" style="color:rgb(0,0,0)">
</span><span class="tag" style="color:rgb(0,0,136)"></div></span><span class="pln" style="color:rgb(0,0,0)">
</span><span class="tag" style="color:rgb(0,0,136)"></div></span><span class="pln" style="color:rgb(0,0,0)">

</span><span class="tag" style="color:rgb(0,0,136)"><div</span><span class="pln" style="color:rgb(0,0,0)"> </span><span class="atn" style="color:rgb(102,0,102)">class</span><span class="pun" style="color:rgb(102,102,0)">=</span><span class="atv" style="color:rgb(0,136,0)">"post"</span><span class="tag" style="color:rgb(0,0,136)">></span><span class="pln" style="color:rgb(0,0,0)">
</span><span class="tag" style="color:rgb(0,0,136)"><a</span><span class="pln" style="color:rgb(0,0,0)"> </span><span class="atn" style="color:rgb(102,0,102)">href</span><span class="pun" style="color:rgb(102,102,0)">=</span><span class="atv" style="color:rgb(0,136,0)">"/js/loadp2.txt"</span><span class="tag" style="color:rgb(0,0,136)">></span><span class="pln" style="color:rgb(0,0,0)">Click here to load page2</span><span class="tag" style="color:rgb(0,0,136)"></a></span><span class="pln" style="color:rgb(0,0,0)">
</span><span class="tag" style="color:rgb(0,0,136)"><div</span><span class="pln" style="color:rgb(0,0,0)"> </span><span class="atn" style="color:rgb(102,0,102)">class</span><span class="pun" style="color:rgb(102,102,0)">=</span><span class="atv" style="color:rgb(0,136,0)">"content"</span><span class="tag" style="color:rgb(0,0,136)">></span><span class="pln" style="color:rgb(0,0,0)">
</span><span class="tag" style="color:rgb(0,0,136)"></div></span><span class="pln" style="color:rgb(0,0,0)">
</span><span class="tag" style="color:rgb(0,0,136)"></div></span><span class="pln" style="color:rgb(0,0,0)">

$("div.post a").click(function() {
var href = $(this).attr("href");
$(this).next().load(href);
return false;
});</span>

测试如下：

Click here to load page1

Click here to load page2

点击链接就能加载页面内容到当前页，一切都OK。现在我们想要加一个新功能，例如论坛帖子的浏览，只有当前点击的帖子内容才会显示，其他帖子都隐藏。为此我们需要为div.post加一个click()事件处理：

<span class="pln" style="color:rgb(0,0,0)">$</span><span class="pun" style="color:rgb(102,102,0)">(</span><span class="str" style="color:rgb(0,136,0)">"div.post"</span><span class="pun" style="color:rgb(102,102,0)">).</span><span class="pln" style="color:rgb(0,0,0)">click</span><span class="pun" style="color:rgb(102,102,0)">(</span><span class="kwd" style="color:rgb(0,0,136)">function</span><span class="pun" style="color:rgb(102,102,0)">(){</span><span class="pln" style="color:rgb(0,0,0)">
$</span><span class="pun" style="color:rgb(102,102,0)">(</span><span class="str" style="color:rgb(0,136,0)">"div.post .content"</span><span class="pun" style="color:rgb(102,102,0)">).</span><span class="pln" style="color:rgb(0,0,0)">hide</span><span class="pun" style="color:rgb(102,102,0)">();</span><span class="pln" style="color:rgb(0,0,0)">          </span><span class="com" style="color:rgb(136,0,0)">// hide all content</span><span class="pln" style="color:rgb(0,0,0)">
$</span><span class="pun" style="color:rgb(102,102,0)">(</span><span class="kwd" style="color:rgb(0,0,136)">this</span><span class="pun" style="color:rgb(102,102,0)">).</span><span class="pln" style="color:rgb(0,0,0)">children</span><span class="pun" style="color:rgb(102,102,0)">(</span><span class="str" style="color:rgb(0,136,0)">".content"</span><span class="pun" style="color:rgb(102,102,0)">).</span><span class="pln" style="color:rgb(0,0,0)">show</span><span class="pun" style="color:rgb(102,102,0)">();</span><span class="pln" style="color:rgb(0,0,0)">    </span><span class="com" style="color:rgb(136,0,0)">// show this one</span><span class="pln" style="color:rgb(0,0,0)">
</span><span class="pun" style="color:rgb(102,102,0)">});</span>

添加完这段代码后，我们发现它不生效，缘故是因为

$("div.post a").click(function() { return false; });

，由于return false执行了event.stopPropagation()，因此事件不能冒泡到上一级DOM，即

$("div.post").click()

不会被事件触发。要达成我们的任务，应该把return
false替换为event.preventDefault()：

<span class="pln" style="color:rgb(0,0,0)">$</span><span class="pun" style="color:rgb(102,102,0)">(</span><span class="str" style="color:rgb(0,136,0)">"div.post a"</span><span class="pun" style="color:rgb(102,102,0)">).</span><span class="pln" style="color:rgb(0,0,0)">click</span><span class="pun" style="color:rgb(102,102,0)">(</span><span class="kwd" style="color:rgb(0,0,136)">function</span><span class="pun" style="color:rgb(102,102,0)">(</span><span class="pln" style="color:rgb(0,0,0)">e</span><span class="pun" style="color:rgb(102,102,0)">)</span><span class="pln" style="color:rgb(0,0,0)"> </span><span class="pun" style="color:rgb(102,102,0)">{</span><span class="pln" style="color:rgb(0,0,0)">
</span><span class="kwd" style="color:rgb(0,0,136)">var</span><span class="pln" style="color:rgb(0,0,0)"> href </span><span class="pun" style="color:rgb(102,102,0)">=</span><span class="pln" style="color:rgb(0,0,0)"> $</span><span class="pun" style="color:rgb(102,102,0)">(</span><span class="kwd" style="color:rgb(0,0,136)">this</span><span class="pun" style="color:rgb(102,102,0)">).</span><span class="pln" style="color:rgb(0,0,0)">attr</span><span class="pun" style="color:rgb(102,102,0)">(</span><span class="str" style="color:rgb(0,136,0)">"href"</span><span class="pun" style="color:rgb(102,102,0)">);</span><span class="pln" style="color:rgb(0,0,0)">
$</span><span class="pun" style="color:rgb(102,102,0)">(</span><span class="kwd" style="color:rgb(0,0,136)">this</span><span class="pun" style="color:rgb(102,102,0)">).</span><span class="kwd" style="color:rgb(0,0,136)">next</span><span class="pun" style="color:rgb(102,102,0)">().</span><span class="pln" style="color:rgb(0,0,0)">load</span><span class="pun" style="color:rgb(102,102,0)">(</span><span class="pln" style="color:rgb(0,0,0)">href</span><span class="pun" style="color:rgb(102,102,0)">);</span><span class="pln" style="color:rgb(0,0,0)">
e</span><span class="pun" style="color:rgb(102,102,0)">.</span><span class="pln" style="color:rgb(0,0,0)">preventDefault</span><span class="pun" style="color:rgb(102,102,0)">();</span><span class="pln" style="color:rgb(0,0,0)">
</span><span class="pun" style="color:rgb(102,102,0)">});</span>

测试修改后的代码：

Click here to load page1

Click here to load page2

如果把return false和live/delegate事件混用，情况就更糟糕了：

<span class="pln" style="color:rgb(0,0,0)">$</span><span class="pun" style="color:rgb(102,102,0)">(</span><span class="str" style="color:rgb(0,136,0)">"a"</span><span class="pun" style="color:rgb(102,102,0)">).</span><span class="pln" style="color:rgb(0,0,0)">click</span><span class="pun" style="color:rgb(102,102,0)">(</span><span class="kwd" style="color:rgb(0,0,136)">function</span><span class="pun" style="color:rgb(102,102,0)">(){</span><span class="pln" style="color:rgb(0,0,0)">
</span><span class="com" style="color:rgb(136,0,0)">// do something</span><span class="pln" style="color:rgb(0,0,0)">
</span><span class="kwd" style="color:rgb(0,0,136)">return</span><span class="pln" style="color:rgb(0,0,0)"> </span><span class="kwd" style="color:rgb(0,0,136)">false</span><span class="pun" style="color:rgb(102,102,0)">;</span><span class="pln" style="color:rgb(0,0,0)">
</span><span class="pun" style="color:rgb(102,102,0)">});</span><span class="pln" style="color:rgb(0,0,0)">

$</span><span class="pun" style="color:rgb(102,102,0)">(</span><span class="str" style="color:rgb(0,136,0)">"a"</span><span class="pun" style="color:rgb(102,102,0)">).</span><span class="pln" style="color:rgb(0,0,0)">live</span><span class="pun" style="color:rgb(102,102,0)">(</span><span class="str" style="color:rgb(0,136,0)">"click"</span><span class="pun" style="color:rgb(102,102,0)">,</span><span class="pln" style="color:rgb(0,0,0)"> </span><span class="kwd" style="color:rgb(0,0,136)">function</span><span class="pun" style="color:rgb(102,102,0)">(){</span><span class="pln" style="color:rgb(0,0,0)">
</span><span class="com" style="color:rgb(136,0,0)">// this won't fire</span><span class="pln" style="color:rgb(0,0,0)">
</span><span class="pun" style="color:rgb(102,102,0)">});</span>

如果确实需要阻止事件冒泡，也应该显式地调用：

<span class="pln" style="color:rgb(0,0,0)">$</span><span class="pun" style="color:rgb(102,102,0)">(</span><span class="str" style="color:rgb(0,136,0)">"div.post"</span><span class="pun" style="color:rgb(102,102,0)">).</span><span class="pln" style="color:rgb(0,0,0)">click</span><span class="pun" style="color:rgb(102,102,0)">(</span><span class="kwd" style="color:rgb(0,0,136)">function</span><span class="pun" style="color:rgb(102,102,0)">(){</span><span class="pln" style="color:rgb(0,0,0)">
</span><span class="com" style="color:rgb(136,0,0)">// do something</span><span class="pln" style="color:rgb(0,0,0)">
</span><span class="pun" style="color:rgb(102,102,0)">});</span><span class="pln" style="color:rgb(0,0,0)">
$</span><span class="pun" style="color:rgb(102,102,0)">(</span><span class="str" style="color:rgb(0,136,0)">"div.post a"</span><span class="pun" style="color:rgb(102,102,0)">).</span><span class="pln" style="color:rgb(0,0,0)">click</span><span class="pun" style="color:rgb(102,102,0)">(</span><span class="kwd" style="color:rgb(0,0,136)">function</span><span class="pun" style="color:rgb(102,102,0)">(</span><span class="pln" style="color:rgb(0,0,0)">e</span><span class="pun" style="color:rgb(102,102,0)">){</span><span class="pln" style="color:rgb(0,0,0)">
</span><span class="com" style="color:rgb(136,0,0)">// 浏览器跳转到新页面（默认行为）</span><span class="pln" style="color:rgb(0,0,0)">
</span><span class="com" style="color:rgb(136,0,0)">// 但阻止事件冒泡，即不会执行$("div.post").click()</span><span class="pln" style="color:rgb(0,0,0)">
e</span><span class="pun" style="color:rgb(102,102,0)">.</span><span class="pln" style="color:rgb(0,0,0)">stopPropagation</span><span class="pun" style="color:rgb(102,102,0)">();</span><span class="pln" style="color:rgb(0,0,0)">
</span><span class="pun" style="color:rgb(102,102,0)">});</span>

event.stopPropagation()用于阻止事件冒泡，jQuery中还有另一个函数：event.stopImmediatePropagation()，它用于阻止一个事件的继续执行，即使当前对象上还绑定了其他处理函数：

<span class="pln" style="color:rgb(0,0,0)">$</span><span class="pun" style="color:rgb(102,102,0)">(</span><span class="str" style="color:rgb(0,136,0)">"div a"</span><span class="pun" style="color:rgb(102,102,0)">).</span><span class="pln" style="color:rgb(0,0,0)">click</span><span class="pun" style="color:rgb(102,102,0)">(</span><span class="kwd" style="color:rgb(0,0,136)">function</span><span class="pun" style="color:rgb(102,102,0)">(){</span><span class="pln" style="color:rgb(0,0,0)">
</span><span class="com" style="color:rgb(136,0,0)">// do something</span><span class="pln" style="color:rgb(0,0,0)">
</span><span class="pun" style="color:rgb(102,102,0)">});</span><span class="pln" style="color:rgb(0,0,0)">

$</span><span class="pun" style="color:rgb(102,102,0)">(</span><span class="str" style="color:rgb(0,136,0)">"div a"</span><span class="pun" style="color:rgb(102,102,0)">).</span><span class="pln" style="color:rgb(0,0,0)">click</span><span class="pun" style="color:rgb(102,102,0)">(</span><span class="kwd" style="color:rgb(0,0,136)">function</span><span class="pun" style="color:rgb(102,102,0)">(</span><span class="pln" style="color:rgb(0,0,0)">e</span><span class="pun" style="color:rgb(102,102,0)">){</span><span class="pln" style="color:rgb(0,0,0)">
</span><span class="com" style="color:rgb(136,0,0)">// stop immediate propagation</span><span class="pln" style="color:rgb(0,0,0)">
e</span><span class="pun" style="color:rgb(102,102,0)">.</span><span class="pln" style="color:rgb(0,0,0)">stopImmediatePropagation</span><span class="pun" style="color:rgb(102,102,0)">();</span><span class="pln" style="color:rgb(0,0,0)">
</span><span class="pun" style="color:rgb(102,102,0)">});</span><span class="pln" style="color:rgb(0,0,0)">

$</span><span class="pun" style="color:rgb(102,102,0)">(</span><span class="str" style="color:rgb(0,136,0)">"div a"</span><span class="pun" style="color:rgb(102,102,0)">).</span><span class="pln" style="color:rgb(0,0,0)">click</span><span class="pun" style="color:rgb(102,102,0)">(</span><span class="kwd" style="color:rgb(0,0,136)">function</span><span class="pun" style="color:rgb(102,102,0)">(){</span><span class="pln" style="color:rgb(0,0,0)">
</span><span class="com" style="color:rgb(136,0,0)">// never fires</span><span class="pln" style="color:rgb(0,0,0)">
</span><span class="pun" style="color:rgb(102,102,0)">});</span><span class="pln" style="color:rgb(0,0,0)">

$</span><span class="pun" style="color:rgb(102,102,0)">(</span><span class="str" style="color:rgb(0,136,0)">"div a"</span><span class="pun" style="color:rgb(102,102,0)">).</span><span class="pln" style="color:rgb(0,0,0)">click</span><span class="pun" style="color:rgb(102,102,0)">(</span><span class="kwd" style="color:rgb(0,0,136)">function</span><span class="pun" style="color:rgb(102,102,0)">(){</span><span class="pln" style="color:rgb(0,0,0)">
</span><span class="com" style="color:rgb(136,0,0)">// never fires</span><span class="pln" style="color:rgb(0,0,0)">
</span><span class="pun" style="color:rgb(102,102,0)">});</span>

最后结论是：理解return false，尽量避免使用它，请用event.preventDefault()替代return false。