`sync$()` 同步事件 (BETA)

Qwik 异步处理事件。这意味着某些 API（如 event.preventDefault() 和 event.stopPropagation()）无法按预期工作。为了解决此限制，Qwik 提供了一个 sync$() API，允许您同步处理事件。但 sync$() 有一些注意事项

sync$() 无法闭包任何状态。
sync$() 无法调用在作用域中声明或导入的其他函数。
sync$() 被序列化为 HTML，因此我们应该注意函数的大小。

处理这些限制的典型方法是将事件处理分成两部分

sync$()：同步调用，可以调用 event.preventDefault() 和 event.stopPropagation() 等方法。
$()：异步调用，可以闭包状态并调用其他函数，对大小没有限制。

由于 sync$() 无法访问状态，那么处理它的最佳策略是什么？答案是使用元素属性将状态传递到 sync$() 函数中。

注意：如果您只需要阻止默认行为，您可以简单地使用标准的 preventDefault:{eventName} 语法。这仅适用于您需要同步地将事件链接在一起的情况。

示例：带状态的 `sync$()`

在此示例中，我们有一个行为，我们希望根据某些状态阻止链接的默认行为。我们通过将代码分成三个部分来实现这一点

sync$()：同步部分，保持最小化，
$()：异步部分，可以任意大，可以闭包状态，
data-should-prevent-default：元素上的属性，用于将状态传递到 sync$() 函数中。

https://qwik.node.org.cn/demo/cookbook/sync-event/

import { component$, useSignal, sync$, $ } from '@builder.io/qwik';
 
export default component$(() => {
  const shouldPreventDefault = useSignal(true);
  return (
    <div>
      <div>Sync Event:</div>
      <input
        type="checkbox"
        checked={shouldPreventDefault.value}
        onChange$={(e, target) =>
          (shouldPreventDefault.value = target.checked)
        }
      />{' '}
      Should Prevent Default
      <hr />
      <a
        href="https://google.com"
        target="_blank"
        data-should-prevent-default={shouldPreventDefault.value}
        onClick$={[
          sync$((e: MouseEvent, target: HTMLAnchorElement) => {
            if (target.hasAttribute('data-should-prevent-default')) {
              e.preventDefault();
            }
          }),
          $(() => {
            console.log(
              shouldPreventDefault.value ? 'Prevented' : 'Not Prevented'
            );
          }),
        ]}
      >
        open Google
      </a>
    </div>
  );
});

贡献者

感谢所有帮助改进此文档的贡献者！

sync$() 同步事件 (BETA)

示例：带状态的 sync$()

贡献者

`sync$()` 同步事件 (BETA)

示例：带状态的 `sync$()`