什么时候jQuery点击function需要’事件’?

我有一个jquery的点击function,直到我添加’event’才会起作用(见下文)。

什么时候需要? 本文档最常使用它: http ://api.jquery.com/click/

没工作:

$(document).ready(function () { $('#div a').click(function () { event.preventDefault(); $('#menu,#wrapper').toggleClass('open'); }); }) 

作品:

 $(document).ready(function () { $('#div a').click(function (event) { event.preventDefault(); $('#menu,#wrapper').toggleClass('open'); }); }) 

您链接的文档可以确定click函数是绑定的快捷方式,eventType为"click" 。 以下是本文档的摘录:

.bind(eventType [,eventData],handler(eventObject))

绑定函数的原型显示handler (您提供的回调)接收一个eventObject ,这是您在代码中拥有的事件。

此事件是一个jQuery包装事件,具有您调用的函数preventDefault

所以这一行

 event.preventDefault(); 

需要定义事件。 在函数声明中编写function(event)声明了局部变量事件,其值将是jQuery给出的eventObject之一。

或者,如果您不喜欢定义变量,则可以执行以下操作:

 $(document).ready(function () { $('#div a').click(function () { $('#menu,#wrapper').toggleClass('open'); return false; // this prevents default handling and also stops propagation }); }) 

如您所述,jquery文档解释了方法及其签名,但没有给出使用eventObject的示例。

 .click( handler(eventObject) ) handler(eventObject) A function to execute each time the event is triggered. 

您正在提供匿名函数来代替处理程序(eventObject):

 function() { // do something } 

但函数签名包含可以使用的eventObject

 function(event) { // do something with event, such as event.preventDefault(); } 

请注意,您也可以调用命名函数,如果这有助于您的理解:

 $(document).ready(function () { $('#div a').click(handleSomeClick); }) function handleSomeClick(event) { event.preventDefault(); $('#menu,#wrapper').toggleClass('open'); } 

您可以使用console.log(event)来查看使用此对象可以执行的操作。

在不起作用的代码片段中, event未定义,因为您没有声明它或将其作为函数的参数接受。

 $(element).click(function(event){ // "event" is optional, but required if you intend to use it event.preventDefault(); }); 

如果您打算使用事件对象,则只需“传递”事件对象参数,例如使用它来阻止代码中的默认操作或从中获取信息,例如事件源自哪个元素。

另请注意,您可以使用您想要的任何名称代替事件,它仍然可以使用。

 $(element).click(function(foobar){ foobar.preventDefault(); alert("The id of the clicked element is: " + foobar.target.id); }); 

如果你不确定,无论如何都要包括它,它不会伤害任何东西。

触发click事件时,您的侦听器函数将被传递给事件对象 。 在第一个示例中,您的函数不接受任何参数,也不会定义event ,因此未定义event.preventDefaultevent

但是让我们稍微回顾一下:

在JavaScript中,当触发事件侦听器函数时,它们将作为第一个参数传递给事件对象 。 此事件对象包含有关刚刚发生的事件的详细信息,例如,为keydown事件按下了哪个键,或者为click事件使用了哪个鼠标按钮(左,右,中)。

事件对象还有一些用于控制事件的特殊函数,包括event.preventDefault ,它会停止默认的浏览器行为。 例如,当您将click侦听器绑定到链接元素时(就像您在此处一样),您可能希望阻止浏览器实际关注链接,这是浏览器对单击链接的默认反应。

特别是在jQuery方面,事件对象是标准化的跨浏览器使用,但是我在上面所说的关于普通JS的所有内容也适用。 您可以在jQuery文档中查看jQuery事件对象的规范。

tl; dr:您希望您的函数能够使用event.preventDefault 。 为此,您必须让事件侦听器函数接受事件中的事件对象 ,然后调用其.preventDefault方法。

因为你使用event event.preventDefault(); 你必须将它作为参数传递,但在正常情况下它是可选的