Svelte基础
Svelte高阶
上下文API
特殊元素
接下来
SvelteKit基础
Shared modules
API routes
$app/state
Errors and redirects
Advanced SvelteKit
Page options
Link options
Advanced routing
Advanced loading
Environment variables
Conclusion
支持了window
当然也不能忘了document
不是,毕竟有些事件还非得在document
上触发, 比如: selectionchange
.
来使用<svelte:document>
给document
对象添加上onselectionchange
事件处理函数:
The
<svelte:document>
element allows you to listen for events that fire ondocument
. This is useful with events likeselectionchange
, which doesn’t fire onwindow
. Add theonselectionchange
handler to the<svelte:document>
tag:
App
<svelte:document {onselectionchange} />
偷偷告诉尽量避免在document
元素上使用mouseenter
和mouseleave
哦,因为有些浏览器不支持,可以用在<svelte:body>
上. 这都是技巧
Avoid
mouseenter
andmouseleave
handlers on this element, as these events are not fired ondocument
in all browsers. Use<svelte:body>
instead.
previous next
<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