Skip to main content
Svelte基础
介绍
响应
属性Props
逻辑表达式
事件
绑定
Classes和样式
动作Actions
转场
Svelte高阶
响应式进阶
内容复用
Motion
Advanced bindings
Advanced transitions
Context API
Special elements
<script module>
Next steps
Basic SvelteKit
Introduction
Routing
Loading data
Headers and cookies
Shared modules
Forms
API routes
$app/state
Errors and redirects
Advanced SvelteKit
Hooks
Page options
Link options
Advanced routing
Advanced loading
Environment variables
Conclusion

The <svelte:document> element allows you to listen for events that fire on document. This is useful with events like selectionchange, which doesn’t fire on window.

Add the onselectionchange handler to the <svelte:document> tag:

App
<svelte:document {onselectionchange} />

Avoid mouseenter and mouseleave handlers on this element, as these events are not fired on document in all browsers. Use <svelte:body> instead.

Edit this page on GitHub

<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>

loading Svelte compiler...
loading svelte compiler