我需要一个长按事件来绑定到svelte 3中的按钮。我希望以尽可能“绝世”的方式做到这一点。
我已经尝试过使用长按功能,但这似乎有些令人费解和棘手,也似乎有点慢。
function longPress(node, callback) {
console.log(node)
function onmousedown(event) {
const timeout = setTimeout(() => callback(node.innerHTML), 1000);
function cancel() {
clearTimeout(timeout);
node.removeEventListener("mouseup", cancel, false);
}
node.addEventListener("mouseup", cancel, false);
}
node.addEventListener("mousedown", onmousedown, false);
return {
destroy() {
node.removeEventListener("mousedown", onmousedown, false);
}
};
}
</script>
<div>
<Video />
{#each Object.entries(bindings) as [id, value]}
<button on:click = {()=>longPress(this,addImage)}> {id} </button>
{/each}
</div>
这有效,但是我敢肯定有更好的方法。
答案 0 :(得分:5)
对于这种事情,我将使用 action ,它是在创建元素时运行的函数(并且可以返回在参数更改或元素被破坏时运行的函数) ):https://svelte.dev/tutorial/actions
在这种情况下,您可以创建一个可重复使用的longpress
操作,就像上面的函数一样,该操作在目标元素上分派一个自定义longpress
事件,您可以像本地DOM事件一样监听该事件:< / p>
<script>
import { longpress } from './actions.js';
let pressed;
</script>
<button use:longpress on:longpress="{e => pressed = true}">
longpress me
</button>
export function longpress(node, threshold = 500) {
// note — a complete answer would also consider touch events
const handle_mousedown = () => {
let start = Date.now();
const timeout = setTimeout(() => {
node.dispatchEvent(new CustomEvent('longpress'));
}, threshold);
const cancel = () => {
clearTimeout(timeout);
node.removeEventListener('mousemove', cancel);
node.removeEventListener('mouseup', cancel);
};
node.addEventListener('mousemove', cancel);
node.addEventListener('mouseup', cancel);
}
node.addEventListener('mousedown', handle_mousedown);
return {
destroy() {
node.removeEventListener('mousedown', handle_mousedown);
}
};
}
此方法的优点是您已将'longpress'的定义与处理它的事物分开,因此addImage
/ node.innerHTML
逻辑可以清晰地分开,并且您可以-在您应用的其他位置使用操作。
完整的演示,包括将参数传递给动作:https://svelte.dev/repl/f34b6159667247e6b6abb5142b276483?version=3.6.3