How can I use .preventDefault() for every event below? Do I have to specify it for each event or can I do it another way?
$("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
}
});
One approach:
$('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");
}
});
Though this works, it does feel rather verbose and, it would, probably, make sense to try and handle all the functionality in one common event-handler, perhaps triggering/calling different functions based on a switch statement, for example:
$('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... */
}
});
Incidentally, JavaScript doesn't really distinguish between a click and a dblclick event, unless you measure the time between click events youself; so your event-handling is likely to be problematic.
Another way is to use e.type inside a common handler.
$('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");
}
});
I still don't recommend the above code, but just posting it in here as an alternate option.
My suggestion is to have the e.preventDefault() in each of the handler.
$("h3 a").on("click mouseenter mouseleave dblclick", function(e){ e.preventDefault();});?