preventDefault in function with more parameters?

Question

I have a function that is run when clicking an input in the DOM. I want to stop the element from being checked until my function can approve it. I'm trying to do this using e.preventDefault(); or event.preventDefault(); (is there any difference?!) but I'm not succeeding, what am I doing wrong?

This is my code without the preventDefault-part.

$(document).on("click","[data-item]", function() {
    cart.updateCart(this);
});

cart.updateCart = function(target) {
   // do stuff and perhaps check the input element
}

I tried this, which is not working:

$(document).on("click","[data-item]", function() {
    cart.updateCart(this, event);
});

cart.updateCart = function(target, event) {
    event.preventDefault();
    console.log(event); // returns MouseEvent -- is this even the correct "event" ?
   // do stuff and perhaps check the input element
}

I think I'm not "getting" how this works. Perhaps someone can explain how this works and what I'm doing wrong?

Answer 1

event should be the first parameter passed into your click handler. So your code really should be like this.:

$(document).on("click","[data-item]", function(event) {
    cart.updateCart(this, event);
});

cart.updateCart = function(target, event) {
    event.preventDefault();
    console.log(event); // returns MouseEvent -- is this even the correct "event" ?
   // do stuff and perhaps check the input element
}

You can read more about preventing default actions here.