event.preventDefault()和多个事件

本文介绍了event.preventDefault()和多个事件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

在我开始编写大量无法使用的代码之前，我想我会问这个问题.

Before I start writing huge swathes of code that don't work I thought I'd ask this question.

event.preventDefault()仅取消click事件的默认操作，不是吗?

event.preventDefault() only cancels the default action of the click event doesn't it?

从理论上讲，我应该能够将jQuery中的多个单击事件处理程序绑定到给定的目标，以执行诸如Ajax帖子和Google跟踪之类的不同操作.

Theoretically I should be able to bind mutiple click event handlers in jQuery to a given target to perform different actions like Ajax posts and Google tracking.

我错了吗?

推荐答案

event.preventDefault()仅取消click事件的默认操作，不是吗?

event.preventDefault() only cancels the default action of the click event doesn't it?

它会取消浏览器对事件的默认操作(而不仅仅是 click 事件)( W3C文档， jQuery文档).因此，例如，在 submit 表单事件中，它防止浏览器提交表单.它不会停止您在代码中所做的任何事情，也不会停止冒泡.这就是 stopPropagation 的用途( W3C文档， jQuery文档).

It cancels the browser's default action of the event (not just the click event) (W3C docs, jQuery docs). So for instance, in the form submit event, it prevents the form being submitted by the browser. It doesn't stop anything you're doing in code, and it doesn't stop bubbling; that's what stopPropagation is for (W3C docs, jQuery docs).

因此，假设您在 div 中有一个链接，并且在链接和 div 上都钩有 click 事件.如果链接的事件处理程序调用 preventDefault ，浏览器将不执行其默认操作(跟随链接)，但是事件将继续使DOM冒泡到链接的父元素 div，因此您也可以在 click 处理程序上看到该事件.您在任一处理程序中执行代码的任何操作均不会受到调用 preventDefault 的影响.

So say you have a link in a div, and you have the click event hooked on both the link and the div. If the link's event handler calls preventDefault, the browser won't do its default action (following the link), but the event continues to bubble up the DOM to the link's parent element, the div, and so you'll see the event on your click handler there, too. Any actions you're taking in code in either handler will be unaffected by your calling preventDefault.

在下面的评论中，您询问有关 same 元素的多个处理程序. preventDefault 和 stopPropagation 都不会影响它们，它们仍然会被触发...除非您使用 stopImmediatePropagation ，它告诉jQuery将事件停止在其轨迹中(但不会阻止浏览器的默认操作).

In your comment below, you ask about multiple handlers on the same element. Neither preventDefault nor stopPropagation affects those, they'll still get fired...unless you use stopImmediatePropagation, which tells jQuery to stop the event dead in its tracks (but doesn't prevent the browser's default action).

我可能会这样说，如果您从事件处理程序中返回 false ，这将告诉jQuery阻止默认的和停止冒泡.就像调用 preventDefault 和 stopPropagation 一样.当事件处理程序完全控制事件时，这是一种方便的快捷方式.

I should probably round this out by saying that if you return false from your event handler, that tells jQuery to prevent the default and stop bubbling. It's just like calling preventDefault and stopPropagation. It's a handy shortcut form for when your event handler is taking full control of the event.

因此，鉴于此HTML:

So, given this HTML:

<div id='foo'><a href='stackoverflow'>Q&amp;A</a></div>

示例1:

// Here we're preventing the default but not stopping bubbling, // and so the browser won't follow the link, but the div will // see the event and the alert will fire. $("#foo").click(function() { alert("foo clicked"); }); $("#foo a").click(function(event) { event.preventDefault(); });

示例2:

// Here we're stopping propagation and not preventing the default; // the browser will follow the link and the div will not be given // a chance to process the event (no alert, and more to the point, // code in the div's handler can't prevent the default) $("#foo").click(function() { alert("foo clicked"); }); $("#foo a").click(function(event) { event.stopPropagation(); });

示例3 (您将很少看到此内容):

Example 3 (you'll only rarely see this):

// Here we're doing both, and so the browser doesn't follow the // link and the div doesn't see the event (no alert). $("#foo").click(function() { alert("foo clicked"); }); $("#foo a").click(function(event) { event.preventDefault(); event.stopPropagation(); });

示例4:

// Shorter version of Example 3, exactly the same effect $("#foo").click(function() { alert("foo clicked"); }); $("#foo a").click(function() { return false; });