Skip to main content

<svelte:document> 要素では document で発生するイベントをリスンすることができます。これは、selectionchange のような、window では発生しないイベントを扱うときに便利です。

selectionchange ハンドラを <svelte:document> タグに追加します:

App.svelte
<svelte:document on:selectionchange={handleSelectionChange} />

mouseenter や mouseleave はすべてのブラウザで document では発生しないため、これらのハンドラをこの要素に追加しないでください。代わりに <svelte:body> を使用してください。

Next: <svelte:head>

1
2
3
4
5
6
7
8
9
10
11
<script>
	let selection = '';
 
	const handleSelectionChange = (e) => selection = document.getSelection();
</script>
 
<svelte:document />
 
<h1>Select this text to fire events</h1>
<p>Selection: {selection}</p>
initialising