vue事件对象、冒泡、阻止默认行为

最新推荐文章于 2024-05-09 12:10:41 发布
最新推荐文章于 2024-05-09 12:10:41 发布
阅读量2.3w 收藏 1
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/H1069495874/article/details/55225184
版权

事件对象

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="../js/Vue.js" charset="utf-8"></script>
    <script type="text/javascript">
      window.onload = function(){
        var vm = new Vue({
          el:'#box',
          data:{},
          methods:{
            show:function(ev){
              alert(ev.clientX);
              alert(ev.clientY);
            }
          }
        });
      }
    </script>
  </head>
  <body>
    <div id="box">
      <input type="button" name="" value="按钮" @click="show($event)">
    </div>
  </body>
</html>

事件冒泡

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="../js/Vue.js" charset="utf-8"></script>
    <script type="text/javascript">
      window.onload = function(){
        var vm = new Vue({
          el:'#box',
          data:{},
          methods:{
            show:function(){
              alert(111);
            //原生的写法
            //ev.cancelBubble = true;
            },
            show2:function(){
              alert(222);
            }
          }
        });
      }
    </script>
  </head>
  <body>
    <div id="box">
      <div @click="show2()">
        <input type="button" name="" value="按钮" @click.stop="show()">
      </div>
    </div>
  </body>
</html>

阻止事件默认行为

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .show2{
            padding:15px;;
        }
    </style>
    <script src="../js/Vue.js" charset="utf-8"></script>
    <script type="text/javascript">
        window.onload = function () {
            var vm = new Vue({
                el: '#box',
                data: {},
                methods: {
                    show: function () {
                        alert(111)
                    },
                    show2: function () {
                        alert(222)
                    }
                }
            });
        }
    </script>
</head>
<body>
<div id="box">
    <div class="show2">
        <input type="button" name="" value="按钮" @contextmenu.prevent="show()">
    </div>
</div>
</body>
</html>
阁下长得好生俊俏
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
10-17
主要介绍了vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件,结合实例形式分析了vue.js事件简写、冒泡及阻止冒泡等相关操作技巧,需要的朋友可以参考下
重新认识vue之事件阻止冒泡的实现
10-18
Vue还提供了其他的事件修饰符，如`.prevent`用于阻止默认行为（如表单提交），`.capture`用于在事件冒泡开始时触发事件处理函数，`.self`只在事件发生在目标元素自身时触发，`.once`只触发一次，以及`.passive`优化...
阻止 antd Popover弹框 点击事件冒泡
风小猪的博客
04-11 2357
设置e.stopPropagation();阻止点击事件冒泡，此时点击p标签时只会触发p标签上的点击事件，不会触发wrapper容器的点击事件。这是由于Popover边缘区域存在padding，通过样式清除Popover自带的padding。点击p标签时不仅会触发p标签上的点击事件，还会触发wrapper容器的点击事件。如果需要padding，可以在content上自己设置需要的padding。但是，点击Popover边缘区域仍会触发wrapper容器的点击事件。
vue之冒泡阻止 用了el-dropdown-menu&&@click.stop
家有呆喵~的博客
07-02 1077
vue之冒泡阻止 用了Element ui写页面 情况出现：就是我在下拉菜单里放了选择框，在点选择框内容时会出现 下拉菜单收起。 正常情况：在选择框加一个vue自带的阻止冒泡事件 @click.stop 但是出乎我意料 这居然无效，加了和没加 一样的效果 然后我就去查阅资料 发现在选择框加一句 属性申明就可以了popper-append-to-body=“false” 或者：popper-append-to-body=“value” 然后再value的值=flase 最后解决了 我碰到的这个
Vue中@click.stop和@click.prevent实例详解
最新发布
菜鸟教程
05-09 505
到此这篇关于Vue中@click.stop和@click.prevent详解的文章就介绍到这了,更多相关Vue中@click.stop和@click.prevent内容请搜索网赚博客https://www.piaodoo.com/以前的文章或继续浏览下面的相关文章希望大家以后多多支持网赚博客https://www.piaodoo.com/！茂名一技http://www.szsyby.net/茂名一技http://www.enechn.com/美文集http://www.tpyjn.cn/
Vue3事件冒泡
油墨香^-^的博客
08-08 3200
事件冒泡是指当一个元素上的事件被触发时，它会向父元素传播，直到到达文档的根节点。在JS中，事件冒泡是默认行为。这意味着，如果你在一个子组件上绑定了一个事件，当该事件被触发时，它会沿着组件树向上冒泡，直到到达根组件。
Vue处理事件冒泡
qq_51420411的博客
12-22 1万+
初学vue
Element UI - 解决部分组件无法阻止冒泡问题
牧码的博客
11-12 4373
问题背景 部分组件无法阻止冒泡，比如说 “el-switch” 等等。 解决方案 只要在该组件外面套个 div，div 上写 @click.stop 即可。
详解vue事件对象、冒泡、阻止默认行为
08-31
详解 Vue 事件对象、冒泡、阻止默认行为 Vue 事件对象是 Vue 框架中处理事件的核心对象，负责处理用户交互事件，如点击、键盘输入、鼠标移动等。下面对 Vue 事件对象、冒泡、阻止默认行为进行详细介绍。 Vue 事件...
vue.js（2）：如何阻止事件传播和默认行为
u013938578的博客
08-19 4044
1.事件冒泡 IE提出的事件流是事件冒泡流，这种事件流传播是由内向外进行传递。即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档），如下图： 下面演示VUE.JS中的事件冒泡，代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src.
阻止vue点击事件的默认行为
weixin_45644355的博客
09-29 3881
阻止vue点击事件的默认行为： 方法一：javascript:void(0) 方法二：@click.prevent .prevent 阻止事件的默认行为 .stop 阻止事件冒泡 .stop.prevent 阻止默认行为和冒泡 .self 阻止子元素的事件冒泡 .capture 事件捕获 .once事件只触发一次 ...
vue中阻止冒泡事件
qq_40666120的博客
05-12 1万+
vue冒泡事件 事件冒泡是指发生在子元素身上的事件，会冒泡至父元素身上。如我们在子元素身上点击后，也会触发父元素的点击事件，若不及时阻止，该事件还会一级一级冒上去。事件冒泡这个行为是默认存在的，故需要我们进行及时的阻止 <script> window.onload = function(){ var vm = new Vue({ el:'#app', data:{ }, met
vuejs-阻止事件冒泡与默认行为
热门推荐
Lewis_1993的博客
05-18 3万+
阻止事件冒泡与默认行为
vue 中事件冒泡处理
weixin_43173924的博客
08-15 4320
工作中遇到了这个冒泡的问题，影响业务，下次必须记住，直接在事件后面加stop就可以了
Vue停止事件冒泡及阻止默认行为
搬运Gong
04-20 1037
停止事件冒泡 举个栗子：两个嵌套的 div，分别绑定了不同的事件，点击小的 div时，如果不停止事件冒泡，会继续触发外面的 div 绑定事件。 @click.stop 停止事件冒泡。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>停止事件冒泡</title> </head> <body> <div id=.
vue点击事件如何阻止事件冒泡以及取消默认事件
6块腹肌的博客
06-09 3万+
一、阻止事件冒泡方法： 在vue中，一般情况下我们是这样绑定事件方法的： <div class="parent-wrapper" @click="clickWrapper">点这里</div> @click=“事件名”，这是常规方法，但是如果需要阻止事件冒泡的话，可以在click后面加上 .stop，完整写法是：@click="event.stop"，用上面的例子的...
VUE中如何阻止事件冒泡
qq_17355709的博客
01-17 1万+
当父子元素中都有点击事件的时候，为了让触发子元素中的事件时，不去触发父元素中的事件，可以在子元素事件中添加stop来阻止事件冒泡。 如图，在button的点击事件中加上stop，触发addStatus的时候，就不会去触发父元素中的showColorStatus事件。 ...
Vue如何阻止事件冒泡
麻球科技
03-02 2594
如何 解决 vue里面的 冒泡事件 方案如下： a v-on:click.stop="doThis">a>   form v-on:submit.prevent="onSubmit">form>   a v-on:click.stop.prevent="doThat">   form v-on:submit.p
Vue阻止浏览器默认事件
qq_44089649的博客
08-24 1721
Vue阻止浏览器默认事件 使用v-on:mouseup.right 和 v-on:contextmenu.prevent <table v-for="(emailMsg,index) in DataFor.subList" :style="{width: screenWidth2-200+'px'}" v-on:mouseup.right="rightClickEvent(DataIndex,index)" v-on:contextmenu.prevent="">
vue原生的dom事件
05-01
Vue原生的DOM事件是指在Vue组件中接使用的DOM事件，与Vue的自定义事件不同。Vue提供了一种简的方式来处理DOM事件，通过在模板中使用v-on指令来监听DOM事件，并在组件中定义对应的方法来处理事件。 以下是Vue原生的DOM事件的介绍： 1. 事件绑定：可以使用v-on指令来绑定DOM事件，语法为v-on:事件名，例如v-on:click表示绑定点击事件。 2. 事件处理方法：在组件中定义一个方法来处理事件，方法名可以与v-on指令中的事件名相同。例如，可以在组件中定义一个handleClick方法来处理点击事件。 3. 事件修饰符：Vue提供了一些修饰符来增强事件的处理方式。例如，可以使用.stop修饰符来阻止事件冒泡，使用.prevent修饰符来阻止默认行为。 4. 动态事件绑定：可以使用v-bind指令来动态地绑定事件。例如，可以使用v-bind:click="methodName"来动态地绑定点击事件。 5. 事件对象：在事件处理方法中，可以通过$event参数访问到原生的事件对象。例如，在handleClick方法中可以通过$event来获取点击事件的相关信息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值