1

我有一个带有 jquery 的点击功能，直到我添加了“事件”（见下文）。

什么时候需要活动？本文档不使用它：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');
        });
    })
4

5 回答 5

3

您链接到的文档指出该click函数是与 eventType绑定"click"的快捷方式。这是该文档的摘录：

.bind（事件类型 [，事件数据]，处理程序（事件对象））

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

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

所以这条线

event.preventDefault();

需要定义事件。写function(event)在你的函数声明中声明了局部变量 event ，其值将是eventObjectjQuery 给定的值之一。

或者，如果你不喜欢定义变量，你可以这样做：

$(document).ready(function () {
    $('#div a').click(function () {
        $('#menu,#wrapper').toggleClass('open');
        return false; // this prevents default handling and also stops propagation
    });
})
于 2012-12-11T15:33:53.480 回答
2

正如您所指出的，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) 可能对您有用，以查看您可以使用此对象做什么。

于 2012-12-11T15:46:23.097 回答
2

当事件触发时，您的侦听器函数正在传递一个事件对象。click在您的第一个示例中，您的函数不接受任何参数并且不以其他方式定义event，因此eventinevent.preventDefault未定义。

但是让我们备份一下：

在 JavaScript 中，当事件侦听器函数被触发时，它们被传递一个事件对象作为它们的第一个参数。该事件对象包含有关刚刚发生的事件的详细细节，例如，为事件按下了哪个键keydown或为某个事件使用了哪个鼠标按钮（左、右、中）click。

事件对象还具有一些用于控制事件的特殊功能，包括event.preventDefault停止默认浏览器行为的 。例如，当您将click侦听器绑定到链接<a>元素时（如您在此处所做的那样），您可能希望阻止浏览器实际跟踪链接，这是浏览器对单击链接的默认反应。

具体就 jQuery 而言，事件对象是为跨浏览器使用而标准化的，但除此之外，我上面所说的关于纯 JS 的所有内容也适用。您可以在 jQuery 文档中查看jQuery 事件对象的规范。

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

于 2012-12-11T15:48:26.423 回答
2

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

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

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

另请注意，您可以使用任何您想要的名称来代替 event，它仍然可以工作。

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

如果您不确定，无论如何都将其包含在内，它不会伤害任何东西。

于 2012-12-11T15:53:26.537 回答
0

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

于 2012-12-11T16:07:43.813 回答