子组件如何拦截原生点击事件并转发 Emit？防止事件冒泡的实战技巧-Vue.js-PHP中文网

子组件需主动监听+条件判断+显式emit来拦截并可控转发点击事件，禁用透传式@click；应显式绑定到可交互元素，用stoppropagation阻断冒泡，emit语义化事件名及结构化载荷，并通过defineemits声明避免使用'click'。

子组件如何拦截原生点击事件并转发 emit？防止事件冒泡的实战技巧

子组件不能靠 @click="$emit('xxx')" 简单“转发”原生点击事件——这不是拦截，只是耦合绑定；真正拦截并可控转发，关键在**主动监听 + 条件判断 + 显式 emit**，同时用 event.stopPropagation() 或 event.stopImmediatePropagation() 阻断冒泡。

明确监听目标，别让@click直接穿透到根节点

Vue 默认会把未被 props 接收的 attribute（包括原生事件）透传到子组件根元素。如果子组件模板只有一个 <div> 作为根，父组件写的 <code>@click 就会直接绑定到它身上，根本没机会拦截。

正确做法是：在子组件内部显式监听 DOM 事件，不依赖透传。

子组件模板中，给具体可交互元素（如 <button></button>、<span></span>）加 @click="handleClick"
避免在根标签上写 @click，否则等于放弃控制权
若需支持任意内容插槽，可用 <slot></slot>，但注意这仍属透传，不是拦截

在方法里做拦截判断，再 emit 业务事件

点击发生后，先执行逻辑校验（比如禁用态、权限检查），再决定是否 emit，而不是无脑抛出。

jQuery点击事件遮罩弹出层可移动特效代码

"jQuery点击事件遮罩弹出层可移动特效代码下载。一款jquery弹出层插件制作注册表单点击按钮弹出层表单提交效果，可支持拖到的jQuery弹出层效果。标题、高度、宽度等可以自定义弹出层js插件。

下载

使用 event.preventDefault() 阻止默认行为（如表单提交）
用 event.stopPropagation() 阻止事件向上冒泡到父容器
只 emit 语义化事件名（如 'confirm-delete'），不 emit 'click'
携带结构化载荷，例如 { id: 123, reason: 'user-action' }，而非原始 event 对象

Vue 3 Composition API 的标准写法

配合 defineEmits 显式声明，既类型安全，又防止误用原生事件名。

在 <script setup></script> 中调用 const emit = defineEmits(['item-selected', 'action-canceled'])
方法内处理：function handleClick(e) { if (this.disabled) return; e.stopPropagation(); emit('item-selected', { value }); }
切勿在 emits 数组里写 'click' —— 这会让父组件的 @click 被识别为自定义事件，导致原生 event 对象丢失