prevent-default

Syntax

prevent-default: true [every (time)] [after (time)];

This command stops the default behaviour of the event in the browser.

It follows the rules of the JavaScript Event.preventDefault() command. See here for more information:

https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

Important note: The examples below can be a lot to take in if you are just learning the language and haven't tried to use it yet. Just remember when you start to use the click events that if you do not get the expected result, then you need to revisit this page. Bear in mind that the "prevent-default" command usually relates to click events, and sometimes keyboard events, so if it all goes weird on your click events yet you have the config looking good, re-read this :)

A couple of really handy examples follow, to stop you having to use onclick="return false;" everywhere.

The following example traps all same-site "a" tags, and also all form submits and runs a "preventDefault" on them, which suppresses the page redirecting as part of the normal browser behaviour. You would do this if most of the "a" tags on your page were running Active CSS events, and you don't want all these links to redirect the page fully because you have events set up for them. If you have external links going to a new tab, this example still allows those to happen. But if you had an external link or a proper re-locate that was not a "target blank", or a regular form that you wanted to conform to normal browser behaviour, then you would need to put a class (such as "outsideLink") in the element to tell Active CSS to treat it as a regular re-locating form. The following is the setting we use on this site, which handles all our links and forms:

a:not(.outsideLink):not([target="_blank"]):click, form:not(.outsideLink):submit {
	prevent-default: true;
}

If only a few "a" tags on your site actually use Active CSS commands - eg. you only want Active CSS to handle a bespoke menu and a modal window or something - and you mostly have links on your website that will change the location of the page for real, you are probably better off doing the opposite of the above, which would be something like this below. The following does a prevent default on any "a" tags or form tags that have an attribute class of "activeCSSLink":

a.activeCSSLink:click, form.activeCSSLink:submit {
    prevent-default: true;
}

Apologies if you've just stumbled onto this page and couldn't work out why your Active CSS links or forms were going weird! This might help.