jQuery: How do I use event.preventDefault() with custom events?

Question

How can I know in my triggering code that preventDefault has been called?

$(document).trigger('customEvent', params);
if (/* ??? */)
    doDefaultActions();

Rarefied

If your custom event is really custom, then what are you trying to prevent? Normally preventDefault is used so that the browser won't do its normal thing. The browser itself doesn't know or care about custom events. – Trammell

if it is a custom event .. there should be no default action .. – Snips

One reason it might be useful is when you've got a handler bound to both a real event and a custom event. That's nice when you need to initialize a system from (say) the initial state of a checkbox. You don't want to trigger the "click" handler because you don't want the checkbox to toggle. Thus he might want to know if during that sort of process something decided to cancel the checkbox toggle. (The handler wouldn't necessarily check the event name.) – Photomechanical

It's still something you can use in your event mechanism if the handler is also used for non-custom events. – Desiree

Answer 1

trigger() can also take an event object, so if you can create an event object, like so:

var event = jQuery.Event("customEvent");
$(document).trigger(event);

then you can check after the trigger to see if preventDefault() has been called like so:

var prevented = event.isDefaultPrevented();

Desiree

Yeah I learned it myself today by looking it up on the jQuery API. So we all learn today! – Desiree

That doesn't appear to be documented (at api.jquery.com at least) - well I can't find it anyway. The docs are a little better now but I still wish they'd make it a wiki. [edit: ok I see it in the source now!!] – Photomechanical

api.jquery.com/trigger and checkout the first comment. "Documented" is perhaps not the right word here, but it sure is there. – Desiree

Answer 2

In case someone needs it, as I did. Important the 2nd constructor-parameter:

Pure JS:

var event = new CustomEvent("close", { "cancelable": true });
// now event listeners can prevent default behavior
element.onclose(event);
// or: element.dispatchEvent(event);

if (!event.defaultPrevented)
    defaultBehavior();

Congreve

Answer 3

If you're asking how to find out whether or not the default has been prevented, use:

event.isDefaultPrevented()

This will return 'true' or 'false' based on whether or not preventDefault() was called.

EDIT: http://api.jquery.com/event.isDefaultPrevented/

Bespangle

Answer 4

Custom events do not have some default actions that happens .. (they are custom).

On the other hand, if you want to stop the bubbling effect of this event to others then have a look at triggerHandler which does not bubbles up to the hierarchy ..

Snips

Answer 5

To my knowledge the "preventDefault()" call is about preventing the native browser responses to things like clicks on anchor tags or keypresses in text fields. Once the event handling cycle is over, it's over. For made-up events, I don't think it has any effect at all since it's all about the jQuery event processing system and not about native browser functionality.

Your code could set some sort of flag somewhere in order to communicate with the "outside world."

[edit] ooh you could try having the handler stash a reference to the event object somewhere that the exteral code can find it, and then externally check with "isDefaultPrevented()". I don't know whether that'd work however.

Photomechanical