Verbode skakel oorgangsfout in JavaScript

Laat ons 'n skakel hê:

<a href="">skakel</a>

Kry ons skakel in 'n veranderlike:

let skakel = document.querySelector('a');

Koppel 'n kliekhanteraar aan ons skakel. Kanselleer terselfdertyd die oorgang op die skakel om die bladsy te herlaai te voorkom:

skakel.addEventListener('click', function(gebeurtenis) {
	console.log(this.textContent);
	gebeurtenis.preventDefault();
});

Dit lyk asof ons onsself heeltemal beveilig het teen onverwagte gedrag. In werklikheid is dit nie so nie. Die saak is dat wanneer 'n sintaksfout voorkom, sal die JavaScript-kode eenvoudig nie uitgevoer word nie, die blokkering van die skakel sal nie werk nie, en die oorgang daarna sal plaasvind.

In hierdie geval sal ons nie die resultaat sien van die kode-uitvoering nie, en ook nie die fout in die konsole nie, omdat die bladsy sal herlaai. Kom ons maak doelbewus 'n fout in die kode en oortuig onsself in die praktyk:

skakel.addEventListener('click', function(gebeurtenis) {
	thiss.textContent = 'teks'; // sintaksfout
	gebeurtenis.preventDefault();
});

Sodanige probleem het 'n kenmerkende teken: as jy na die konsole kyk op die oomblik van die kliek op die skakel, sal ons vir 'n oomblik 'n rooi fout in die konsole sien, wat amper dadelik sal verdwyn.

Natuurlik sal ons nie die foutteks tyd hê om te lees nie, wat dit aansienlik bemoeilik om dit te vind. Daar is egter 'n slim truuk. Ons moet in href van die skakel 'n hekisie plaas. In hierdie geval sal die oorgang op die skakel nie plaasvind nie en ons sal die fout sien wat in die konsole gegooi is:

<a href="#">skakel</a>