阻止事件传播，点击父元素不希望子元素也触发父元素的事件

最新推荐文章于 2023-09-30 22:21:08 发布

人间清醒小仙女

最新推荐文章于 2023-09-30 22:21:08 发布

阅读量2.5k

点赞数

分类专栏： vue html 文章标签： vue.js javascript

本文链接：https://blog.youkuaiyun.com/weixin_45631278/article/details/108292262

版权

vue 同时被 2 个专栏收录

32 篇文章

订阅专栏

html

10 篇文章

订阅专栏

背景：子元素相对于父元素定位，width和left通过起始位置和结束位置计算，空白的位置有点击事件进行添加元素，已经有元素的位置右键进行修改，没有点击事件

这就需要禁掉父元素的事件传播，否则子元素也会有父元素的点击事件

		<div
			// 父元素事件
          ref="stockyardGroup"
          class="stockyard_item"
          @click="e => handleAdd(e, item.id)"
          // 场景需求没有子元素的地方需要设置一个悬浮框进行提示但是有子元素的地方会显示另一个悬浮框，通过以下
          @mouseenter.stop="() => hover = true"
          @mouseleave.stop="() => hover = false"
          @mousemove="handleMousemove($event)"
        >
	        <div style="height: 100%;" @click="handleChildrenClick(item)">
	         </div>
        </div>
        <div v-show="hover ">
        </div>