Éléments spéciaux / <svelte:document> • Svelte Tutorial

Svelte avancé Éléments spéciaux <svelte:document>

L’élément <svelte:document> vous permet d’écouter des évènements qui se déclenchent sur le document. C’est utile pour des évènements comme selectionchange, qui ne se déclenchent pas sur window.

Ajoutez le gestionnaire onselectionchange sur la balise <svelte:document> :

App

<svelte:document {onselectionchange} />

Évitez les gestionnaires mouseenter et mouseleave sur cet élément, puisque ces évènements ne sont pas déclenchés sur document sur tous les navigateurs. Utilisez plutôt <svelte:body>.

Modifier cette page sur Github

précédent suivant

Liaisons <svelte:window> <svelte:body>

<script>

	let selection = $state('');

	const onselectionchange = (e) => {

		selection = document.getSelection().toString();

};

</script>

<svelte:document />

<h1>Sélectionner ce texte pour déclencher des évènements</h1>

<p>Sélection : {selection}</p>

show text show editor