jquery - 将 .preventDefault() 与多个事件一起使用

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 小提琴演示。

虽然这可行，但它确实感觉相当冗长，并且尝试在一个常见的事件处理程序中处理所有功能可能是有意义的，可能基于 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 小提琴演示。

顺便说一句，JavaScript 并没有真正区分 aclick和dblclickevent，除非您自己测量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()在每个处理程序中都有。