可以按住element.click一段时间吗

Question

Context：在svelte中创建一个键盘元素，我想模拟用户点击来显示动画，但btn.click()要缩短以显示转换。

使用btn.click()确实会激发一个click元素，但它太短了，用户不会注意到。

我试过使用btn.focus()和btn.blur()，但它不会播放动画，只会显示边界。

有没有办法让我模仿点击X的时间
这是我的代码(每个密钥(

<script lang=ts>
import { addLetter, enter, removeLetter, onKeyPress } from "./state";
export let key: string;
let btn: HTMLButtonElement;
function handle(e: MouseEvent) {
if(!e.isTrusted) return
if(key === "DELETE") {
removeLetter(false)
} else if(key === "ENTER") {
enter(false)
} else {
addLetter(key, false)
}
}
onKeyPress((k, kb) => {
if(!(k === key) || !kb) return
btn.click() //! LOOK HERE
})
</script>
<button class="btn kbd transition-all" bind:this={btn} on:click={handle}>{key}</button>

Answer 1

您可以运行动画而不是使用转换，例如

<script>
let button;
function onKeyDown(e) {
if (e.key == 'f') {
animate();
}
}

function animate() {
button.animate(
[{ background: 'red' }],
{ duration: 200, direction: 'alternate', iterations: 2 },
)
}
</script>
<svelte:window on:keydown={onKeyDown}/>
<button bind:this={button} on:click={animate}>F</button>

单键
全键盘

Answer 2

您要查找的是mousedown和mouseup事件

<script lang=ts>
import { addLetter, enter, removeLetter, onKeyPress } from "./state";
export let key: string;
let btn: HTMLButtonElement;
let mousedownTime: Date;
function handle(e: MouseEvent) {
if(!e.isTrusted) return
if(key === "DELETE") {
removeLetter(false)
} else if(key === "ENTER") {
enter(false)
} else {
addLetter(key, false)
}
}
function mouseDown() => {
mousedownTime = new Date().getTime();
}
function mouseUp() {
const mouseupTime = new Date().getTime(),
timeDifference = mouseupTime - mousedownTime;
alert(`Button held down for ${timeDifference}ms`);
}
onKeyPress((k, kb) => {
if(!(k === key) || !kb) return
btn.click() //! LOOK HERE
})
</script>
<button class="btn kbd transition-all" bind:this={btn} on:mousedown={mouseDown} on:mouseup={mouseup}></button>