提问人：Mero 提问时间：10/22/2023 更新时间：10/22/2023 访问量：23
Svelte 在父事件调用时调用新的嵌套事件处理程序
Svelte calls new nested event handler on parent event call
问：
在特定事件发生后，我需要为窗口设置一个新的事件处理程序，所以我的组件代码是这样的：
<script>
const secondClick = () => {
console.log(2);
};
const firstClick = () => {
console.log(1);
// waiting for the next click
window.addEventListener("click",secondClick, {once: true});
};
</script>
<button on:click={firstClick}> btn2 </button>
但是，如果我们单击按钮，则会立即调用嵌套的新窗口单击处理程序！
我对这种行为感到困惑。谁能说明这一点，并说这如何实现，而不会在普通 js 上滚动到仰卧起坐。
答：
1赞
brunnerh
10/22/2023
#1
如果按钮不需要能够触发添加的处理程序，则可以停止事件传播：
<button on:click|stopPropagation={firstClick}>
否则，还可以延迟添加处理程序，以便事件首先冒泡到窗口，然后添加处理程序。例如
setTimeout(() =>
window.addEventListener("click", secondClick, { once: true })
);
另一种方法是始终添加处理程序并保护要通过标志执行的代码：
let armed = false;
function onWindowClick() {
if (!armed)
return;
armed = false;
// <logic here>
}
function onButtonClick() { setTimeout(() => armed = true); }
<svelte:window on:click={onWindowClick} />
...
这还可确保在销毁组件时清理窗口单击事件处理程序。
评论