<svelte:document>要素を使用すると、documentで発生するイベントをリスンできます。これは、windowでは発生しないselectionchangeなどのイベントで役立ちます。
onselectionchangeハンドラを<svelte:document>タグに追加します。
アプリ
<svelte:document {onselectionchange} />この要素では、
mouseenterとmouseleaveハンドラを避けてください。これらのイベントは、すべてのブラウザでdocumentでは発生しません。代わりに<svelte:body>を使用してください。
1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
let selection = $state(''); const onselectionchange = (e) => {selection = document.getSelection().toString();
};
</script>
<svelte:document />
<h1>Select this text to fire events</h1>
<p>Selection: {selection}</p>