在vue中阻止click事件冒泡，防止触发冒泡另一个事件

news/2024/7/24 5:51:10 标签: vue, js, javascript, 冒泡

使用vue阻止子级元素的click事件冒泡，很简单，用stop

<div @click="test1()">
    <span @click.stop="test2()">按钮1</span>
    <span>按钮2</span>
</div>

这样点击div里面的按钮1，就不会触发div绑定时间test1()方法
 


http://www.niftyadmin.cn/n/1466622.html

相关文章

vue中按钮防止暴力点击，多次提交数据的问题，组件通用化封装

vue中按钮防止暴力点击，多次提交数据的问题，组件通用化封装

方法1&#xff1a;用计时器改变按钮可点击状态 <template><div class"test"><button click"btnClick">button</button></div> </template><script>export default {name: HelloWorld,data() {return {is_click…
阅读更多...
js 实现 list转换成tree的方法示例（数组到树）

js 实现 list转换成tree的方法示例（数组到树）

目标&#xff1a; JS 将有父子关系的平行数组转换成树形数据 方法&#xff1a;双重遍历&#xff0c;一次遍历parentId,一次遍历id parendId; 该方法应该能很容易被想到&#xff0c;实现起来也一步一步可以摸索出来&#xff1b; const oldData [{id:1,name:boss,parentId:…
阅读更多...
div在body中可以任意拖动

div在body中可以任意拖动

HTML代码 <div id"idOuterDiv" class"CsOuterDiv"></div> CSS代码 body {background-color:#232429; } .CsOuterDiv {width:256px;height:146px;background-color:white;position:absolute;top:50%;left:50%;transform:translateX(-50%) tra…
阅读更多...
在Vue中使用JSX作为render

在Vue中使用JSX作为render

ant-design-vue开源了一段时间后&#xff0c;收到了一些反馈&#xff0c;尤其是Form组件上线后&#xff0c;很多用户对JSX的使用感到迷惑和不习惯&#xff0c;为此专门介绍下Vue JSX的使用姿势及注意事项。 Form组件的自动收集校验功能需要在JSX下使用&#xff0c;当然如果不需…
阅读更多...
Vue 自定义指令实现点击DOM元素以外触发事件

Vue 自定义指令实现点击DOM元素以外触发事件

1.directive.js import Vue from "vue";// 提交验证Vue.directive("clickOutside", {// 初始化指令bind(el, binding, vnode) {function clickHandler(e) {// 这里判断点击的元素是否是本身&#xff0c;是本身&#xff0c;则返回if (el.contains(e.target…
阅读更多...
Vue 实现复制功能,不需要任何结构内容直接复制方式

Vue 实现复制功能,不需要任何结构内容直接复制方式

介绍&#xff1a; 在做复制文档功能时&#xff0c;考虑到是个不太会复用的小功能&#xff0c;最后选择直接用 document.execCommand 方法实现。 在查阅资料时候&#xff0c;发现其他人都需要在页面上写上结构、ID。然后捕捉某个ID获取内容&#xff0c;感觉很不方便。 使用&a…
阅读更多...
css3字体背景颜色跑马灯

css3字体背景颜色跑马灯

页面效果 CSS .title {border: 0px;font-size: 200%;font-weight: bold;float: left;line-height: 1.5;width: 100%;padding-left: 5px;margin-top:0px;background: -webkit-linear-gradient(left,#ffffff,#ff0000 6.25%,#ff7d00 12.5%,#ffff00 18.75%,#00ff00 25%,#00ffff 31.…
阅读更多...
vue路由切换之淡入淡出的简单实现

vue路由切换之淡入淡出的简单实现

路由跳转的淡入淡出 在开发中有一种需求叫高端、大气、上档次。所以作为一个前端有责任让你的程序开起来更酷炫。可以在页面切换时我们加入一些动画效果&#xff0c;提升我们程序的动效设计 想让路由有过渡动画&#xff0c;需要在<router-view>标签的外部添加<trans…
阅读更多...
最新文章

Copyright @ 2022~2023