Fout met skakel-oorgang in JavaScript

Kom ons ontleed die fout wat met onverwagte skakel-oorgang verband hou. Laat ons vir die voorbeeld die volgende skakel hê:

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

Laat ons ons skakel in 'n veranderlike kry:

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

Laat ons 'n klik-hanteraar aan ons skakel koppel:

link.addEventListener('click', function() {
	console.log(this.textContent);
});

En hier wag 'n verrassing op ons. Die kode is korrek geskryf, maar die afvoer verskyn nie in die konsole nie. Die saak is dat daar by 'n klik 'n oorgang volgens die skakel plaasvind. Aangesien niks in die href-kenmerk gespesifiseer is nie, verwys die skakel eenvoudig na die huidige bladsy.

Dit beteken dat 'n klik op die skakel lei tot die herlaai van die bladsy. Dit wil sê, ons data word in die konsole vertoon, dan herlaai die bladsy, en die konsole word leeg.

As jy mooi kyk, kan jy sien hoe die data in die oomblik van die klik vir 'n oomblik in die konsole verskyn, en dan verdwyn. Dit is die kenmerkende teken van hierdie fout.

Kom ons kyk hoe ons hierdie probleem kan oplos.

Oplossing een

In die href van die skakel moet jy 'n hekjel (#) plaas. Dit sal daartoe lei dat die skakel na 'n spesifieke plek op die huidige bladsy wys en by 'n klik op die skakel sal daar nie 'n herlaai wees nie. Laat ons dit doen:

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

Oplossing twee

'n Meer gevorderde manier is om die verstekaksie te kanselleer met behulp van die preventDefault-metode:

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