Skip to main content
Svelte 基础
介绍
响应式
属性
逻辑
事件
绑定
类和样式
Actions
过渡动画
Svelte 进阶
高级响应性
复用内容
Motion
高级绑定
高级过渡效果
Context API
特殊元素
<script module>
后续步骤
SvelteKit 基础
介绍
路由
加载数据
请求头和 Cookie
共享模块
表单
API 路由
$app/state
错误和重定向
SvelteKit 进阶
钩子函数
页面选项
链接选项
高级路由
高级加载
环境变量
结论

<svelte:document> 元素允许你监听在 document 上触发的事件。这对于像 selectionchange 这种不在 window 上触发的事件特别有用。

onselectionchange 处理程序添加到 <svelte:document> 标签:

App
<svelte:document {onselectionchange} />

避免在这个元素上使用 mouseentermouseleave 处理程序,因为这些事件在某些浏览器的 document 上不会触发。请改用 <svelte:body>

在 GitHub 编辑此页面

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>