Skip to main content

Tương tự như <svelte:window>, phần tử <svelte:body> cho phép bạn lắng nghe các sự kiện xảy ra trên document.body. Điều này hữu ích với các sự kiện mouseenter và mouseleave, không xảy ra trên window.

Thêm các xử lý sự kiện mouseenter và mouseleave vào thẻ <svelte:body>...

App.svelte
<svelte:body
	on:mouseenter={() => hereKitty = true}
	on:mouseleave={() => hereKitty = false}
/>

... và di chuột qua <body>.

Tiếp theo: <svelte:document>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<script>
	import kitten from './kitten.png';
 
	let hereKitty = false;
</script>
 
<svelte:body />
 
<!-- creative commons BY-NC http://www.pngall.com/kitten-png/download/7247 -->
<img
	class:curious={hereKitty}
	alt="Mèo con muốn biết chuyện gì đang xảy ra"
	src={kitten}
/>
 
<style>
	img {
		position: absolute;
		left: 0;
		bottom: -60px;
		transform: translate(-80%, 0) rotate(-15deg);
		transform-origin: 100% 100%;
		transition: transform 0.4s;
	}
 
	.curious {
		transform: translate(-15%, 0) rotate(0deg);
	}
 
	:global(body) {
		overflow: hidden;
	}
</style>
initialising