Alapértelmezett művelet megszakítása JavaScriptben

JavaScript segítségével néha szükséges megakadályozni egy elem alapértelmezett működését. Például egy linkre kattintáskor megakadályozni a navigálást arra a címre. Általában akkor van erre szükség, ha a linket csak valamilyen kód futtatására használjuk. Ebben az esetben az, hogy a linkre kattintva navigálás történik, számunkra nem kívánatos.

Az alapértelmezett művelet megszakítása a Event objektummal történik. Ehhez rendelkezik egy speciális preventDefault() metódussal, amelyet az eseménykezelő bármely pontján meg kell hívni.

Próbáljuk ki a gyakorlatban. Tegyük fel, hogy van egy ilyen linkünk:

<a href="/" id="elem">link</a>

Tegyük úgy, hogy a linkre kattintáskor ne történjen át navigálás egy másik oldalra:

let elem = document.querySelector('#elem');

elem.addEventListener('click', function(event) {
	event.preventDefault();
	console.log('Nem navigálhat erről a linkről!');
});

Adottak linkek. Tegye meg, hogy egy linkre kattintáskor annak href értéke íródjon a link végére, de navigálás ne történjen.

Adottak két input mező, egy bekezdés és egy link. Az input mezőkbe számok írhatók. Tegye meg, hogy a linkre kattintáskor a beírt számok összege íródjon a bekezdésbe.