Question

如何在下面的每个活动中使用.preventDefault()？我是否必须为每个事件指定它，还是可以用其他方式进行指定？

$("h3 a").on({
click: function(){
    console.log("This is a click event");
},
mouseenter: function(){
    console.log("This is a mouseenter event");
},
mouseleave: function(){
    console.log("This is a mouseleave event");
},
dblclick: function(){
    console.log("This is a double click event");
}, function(e){
        e.preventDefault(); // not working
    }
});

Answer 1

一种方法：

$('a').on('click mouseenter mouseleave dblclick', function (e) {
    e.preventDefault();
}).on({
    click: function () {
        console.log("This is a click event");
    },
    mouseenter: function () {
        console.log("This is a mouseenter event");
    },
    mouseleave: function () {
        console.log("This is a mouseleave event");
    },
    dblclick: function () {
        console.log("This is a double click event");
    }
});

JS Fiddle demo

虽然工作，但它确实感觉相当冗长，并且尝试处理一个公共事件处理程序中的所有功能可能是有意义的，可能触发/调用基于的不同函数一个switch语句，例如：

$('a').on('click mouseenter mouseleave dblclick', function (e) {
    e.preventDefault();
    switch (e.type) {
        case 'click':
            clickFunction(e);
            break;
        case 'mouseenter':
            mouseenterFunction(e);
            break;
            /* ...and so on... */
    }
});

JS Fiddle demo

顺便说一句，JavaScript并不能真正区分click和dblclick事件，除非您衡量自己click事件之间的时间;所以你的事件处理可能会有问题。

Answer 2

另一种方法是在公共处理程序中使用e.type。

$('a').on('click mouseenter mouseleave dblclick', function (e) {
    e.preventDefault();
    switch(e.type) {
      case 'click': 
        console.log("This is a click event");
        break;
      case 'mouseenter':
        console.log("This is a mouseenter event");
        break;
      case 'mouseleave':
        console.log("This is a mouseleave event");
        break;
      case 'dblclick': 
        console.log("This is a double click event");
    }
});

我仍然不推荐上面的代码，只是将其作为备用选项发布在此处。

我的建议是在每个处理程序中都有e.preventDefault()。

将.preventDefault（）与多个事件一起使用

2 个答案: