在VUE3 中利用高阶组件处理默认事件 （2023-09-20）

[yaogengzhu]

在事件处理程序中，事件会从被点击的元素开始，向上冒泡到它的父元素，直到冒泡到文档根元素。如果您在父元素上也绑定了相同的事件处理程序，那么它也会被触发。

event.stopPropagation() 和 event.stopImmediatePropagation() 方法都是用来阻止事件冒泡的。它们的区别在于，event.stopPropagation() 方法只能阻止事件冒泡，而 event.stopImmediatePropagation() 方法不仅可以阻止事件冒泡，还可以阻止同一元素上绑定的其他事件处理程序的执行。

具体来说，event.stopPropagation() 方法会阻止事件继续冒泡到父元素，但是同一元素上绑定的其他事件处理程序仍然会被执行。而 event.stopImmediatePropagation() 方法则会立即停止事件的传播，并且不会执行同一元素上绑定的其他事件处理程序。

在上面的代码中，我们在事件处理程序中使用了 event.stopPropagation() 和 event.stopImmediatePropagation() 方法来阻止事件冒泡和立即停止事件传播。这样，当用户点击元素时，事件不会冒泡到父元素，并且同一元素上绑定的其他事件处理程序也不会被执行。

<script lang="ts">
import { defineComponent, h } from 'vue';
import { Button } from 'tdesign-vue-next';

export default defineComponent({
    name: 'PrivilegeBtnPlus',
    setup(props, { slots, emit }) {
        return () =>
            h(
                Button,
                {
                    onClick: (event: Event) => {
                        // 阻止事件冒泡和立即停止事件传播
                        // event.stopPropagation();
                        event.stopImmediatePropagation();
                        // 取消默认的 click 事件行为
                        // event.preventDefault();
                        console.log('ok');
                        // 触发原始的 click 事件处理程序
                        // emit('click', event);
                    },
                    ...props,
                },
                slots
            );
    },
});
</script>

[yaogengzhu]

另外的一个分享，如何在h 函数上使用自定义指令

<script lang="ts">
import { defineComponent, h, withDirectives } from 'vue';
import { Button } from 'tdesign-vue-next';
import { upgrade } from '../directives/upgrade';

export default defineComponent({
    name: 'PrivilegeBtn',
    setup(props, { slots, emit }) {
        return () =>
            withDirectives(
                h(
                    Button,
                    {
                        onClick: (event: Event) => {
                            // 阻止事件冒泡和立即停止事件传播
                            // event.stopPropagation();
                            event.stopImmediatePropagation();
                            // 取消默认的 click 事件行为
                            // event.preventDefault();
                            console.log('ok')
                            // 触发原始的 click 事件处理程序
                            // emit('click', event);
                        },
                        ...props,
                    },
                    slots
                ),
                [[upgrade]]
            );
    },
});
</script>