Reusing DOM event logic with custom events
Before we start talking directly about actions, let’s look at an example of using the mousedown and mouseup events to create a long-press behavior. We shall see how this simple example will lead us on to Svelte actions:
<script>
let timer;
function handleMousedown() {
timer = setTimeout(() => {
console.log('long press!');
}, 2000);
}
function handleMouseup() {
clearTimeout(timer);
}
</script>
<button
on:mousedown={handleMousedown}
on:mouseup={handleMouseup}
/> In the preceding example, we tried to implement a long-press behavior in a button. The idea is to press and hold the button for more than two seconds and then perform some action. As we detect it’s a long press, we print 'long press!' into...