StencilJS Web Component如何让使用者通过自定义点击事件阻止默认行为

核心逻辑 #

问题本质是：自定义的foo-click事件和内部<a>标签的原生点击事件是两个独立事件，外部对自定义事件调用preventDefault不会自动触发原生事件的阻止逻辑。你可以通过读取自定义事件的defaultPrevented状态，在组件内部动态决定是否阻止原生跳转，把控制权完全交给使用者。

修改后的组件代码 #

import { Component, ComponentInterface, Event, EventEmitter, h, Host } from "@stencil/core";

@Component({
    tag: 'foo-testwebcomponent'
})
export class TestWebComponent implements ComponentInterface {
    @Event({
        eventName: 'foo-click',
        cancelable: true // 保持开启，支持自定义事件调用preventDefault
    }) fooClick: EventEmitter;

    // 接收原生点击事件作为入参
    fooClickHandler(nativeClickEvent: MouseEvent) {
        // 发射自定义事件，拿到返回的自定义事件实例
        const emittedEvent = this.fooClick.emit();
        // 如果使用者在自定义事件回调中调用了preventDefault，就阻止原生跳转
        if (emittedEvent.defaultPrevented) {
            nativeClickEvent.preventDefault();
        }
    }

    render() {
        return(
            <Host>
                <a href="#"
                   onClick={this.fooClickHandler.bind(this)}
                >Testing</a>
            </Host>
        )
    }
}

使用示例 #

场景1：不需要阻止跳转 #

使用者不在自定义事件回调中调用preventDefault即可，原生<a>标签会正常跳转：

<foo-testwebcomponent id="test"></foo-testwebcomponent>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    document.getElementById('test')
            .addEventListener('foo-click', event => {
              console.log(`Foo Test Web Component clicked!`);
            });
  });
</script>

场景2：需要阻止跳转 #

使用者在自定义事件回调中调用preventDefault即可：

document.getElementById('test')
        .addEventListener('foo-click', event => {
          event.preventDefault(); // 仅加这行就会触发原生跳转拦截
          console.log(`Foo Test Web Component clicked!`);
        });

内容的提问来源于stack exchange，提问作者mhulse