精华内容
下载资源
问答
  • vue @click.native和@click.stop和@click.self

    万次阅读 多人点赞 2019-05-10 17:02:11
    参考一: vue @click.native 原生点击事件: 1,给vue组件绑定事件时候,... 子组件内部处理click事件然后向外发送click事件:$emit("click".fn) 参考二: 在事件处理器中经常需要调用event.preventDefault()...

    参考一:

    vue @click.native 原生点击事件:

    1,给vue组件绑定事件时候,必须加上native ,不然不会生效(监听根元素的原生事件,使用 .native 修饰符)

    2,等同于在自组件中:

       子组件内部处理click事件然后向外发送click事件:$emit("click".fn)

    参考二:

    在事件处理器中经常需要调用 event.preventDefault() 或 event.stopPropagation()。尽管我们在方法内可以轻松做到,不过让方法是纯粹的数据逻辑而不处理 DOM 事件细节会更好。

    为了解决这个问题,Vue.js 为 v-on 提供两个 事件修饰符:.prevent 与 .stop。你是否还记得修饰符是点号打头的指令后缀?


    <!-- 阻止单击事件冒泡 -->

    <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.prevent></form>


    参考三:

    <!-- 阻止单击事件继续传播 -->

    <a v-on:click.stop="doThis"></a>

     

    <!-- 提交事件不再重载页面 -->

    <form v-on:submit.prevent="onSubmit"></form>

     

    <!-- 修饰符可以串联 -->

    <a v-on:click.stop.prevent="doThat"></a>

     

    <!-- 只有修饰符 -->

    <form v-on:submit.prevent></form>

     

    <!-- 添加事件监听器时使用事件捕获模式 -->

    <!-- 即元素自身触发的事件先在此处理,然后才交由内部元素进行处理 -->

    <div v-on:click.capture="doThis">...</div>

     

    <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->

    <!-- 即事件不是从内部元素触发的 -->

    <div v-on:click.self="doThat">...</div>

    使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,

    用 v-on:click.prevent.self 会阻止所有的点击

    而 v-on:click.self.prevent 只会阻止对元素自身的点击

    <!-- 点击事件将只会触发一次 -->
    <a v-on:click.once="doThis"></a>

    不像其它只能对原生的 DOM 事件起作用的修饰符,.once 修饰符还能被用到自定义的组件事件上。如果你还没有阅读关于组件的文档,现在大可不必担心。

    Vue 还对应 addEventListener 中的 passive 选项提供了 .passive 修饰符。

    <!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
    <!-- 而不会等待 `onScroll` 完成  -->
    <!-- 这其中包含 `event.preventDefault()` 的情况 -->
    <div v-on:scroll.passive="onScroll">...</div>

    这个 .passive 修饰符尤其能够提升移动端的性能。

    不要把 .passive 和 .prevent 一起使用,因为 .prevent 将会被忽略,同时浏览器可能会向你展示一个警告。请记住,.passive 会告诉浏览器你想阻止事件的默认行为。

    参考四:

    关于路由的跳转,如果我们直接页面使用a标签,当然无可厚非;

    但是既然是vue单页面,那么我们就应该能使用vue自带的组件,那就尽量去熟练它们。

    页面交互

    <router-link to="/" @click.native.prevent="clickTag">
      test has native router-link 
    </router-link>
    //在上面那种情况下,路由会跳转到首页,并且控制台也会打印出
    
    <router-link to="/" @click="clickTag">
      test no native router-link 
    </router-link>
    //在上面那种情况下,路由只会跳转到首页,控制台毫无反应
    //ps:@mouseover、@mouseout等等事件都如此
    <script>
    export default {
      methods: {
        clickTag() {
          console.log('i am click in father.vue')
        }
      }
    }
    </script>
    

    上面那种是vue自带的组件情况,如果是自定义组件的话,native修饰符在我眼里,起到了节约代码的作用。

    父组件

    <svg-icon icon-class="user" @click="svgClickTag"></svg-icon>
    //js methods部分
    svgClickTag() {
      console.log('svg-icon click in father.vue')
    }
    

    子组件:要想实现父组件内的点击事件,子组件必须监听点击并触发父组件定义的click

    <svg :class="svgClass" aria-hidden="true" @click="clickSvgComponent">
      <use :xlink:href="iconName"></use>
    </svg>
    //js methods部分
    clickSvgComponent() {
      this.$emit('click')
    }
    

    如果有了native修饰符,那就没有子组件什么事情了

    //子组件照常写,不作任何事件绑定,删掉methods
    <svg :class="svgClass" aria-hidden="true">
      <use :xlink:href="iconName"></use>
    </svg>
    
    //父组件
    <svg-icon icon-class="user" @click.native="svgClickTag"></svg-icon>
    

    针对vue-element-ui中的el-button

    <el-button type="primary" style="width: 100%;" :loading="loading" 
     @click.native.prevent="handleLogin">Sign in</el-button>
    //个人认为这个库已经这某些地方把原生的click做了处理了,因为尝试过去掉native,照常成功
    

    总结:native就是把组件变回原生DOM的一种方式,相当于给组件绑定原生事件。

     

     

     

    展开全文
  • Vue中@click.stop与@click.prevent

    千次阅读 2021-03-12 11:14:53
    Vue中@click.stop与@click.prevent 一、@click.stop 问题:父元素中添加了一个click事件,其下面的子元素中也添加了click事件,此时,我想点击子元素获取子元素的点击事件,但却触发的是父元素的事件: <view ...

    Vue中@click.stop与@click.prevent

    一、@click.stop

    问题:父元素中添加了一个click事件,其下面的子元素中也添加了click事件,此时,我想点击子元素获取子元素的点击事件,但却触发的是父元素的事件:

    <view class="footer-box" @click="clickCard">
    		<view @click="footerClick('喜欢')"><text class="footer-box__item">喜欢</text></view>
    		<view @click="footerClick('评论')"><text class="footer-box__item">评论</text></view>
    		<view @click="footerClick('分享')"><text class="footer-box__item">分享</text></view>
    </view>
    

    此时,我们就需要使用@click.stop:阻止事件冒泡方法来解决这个问题:

    <view class="footer-box" @click="clickCard">
    		<view @click.stop="footerClick('喜欢')"><text class="footer-box__item">喜欢</text></view>
    		<view @click.stop="footerClick('评论')"><text class="footer-box__item">评论</text></view>
    		<view @click.stop="footerClick('分享')"><text class="footer-box__item">分享</text></view>
    </view>
    

    二、@click.prevent

    还有一个与之相似的方法:@click.prevent:阻止事件的默认行为,例如:在代码里写入一个a标签,点击会跳转到目标链接网页中:

    <view class="example-body">
    	<a href="http://www.baidu.com">百度</a>
    </view>
    

    但如果我们不想让它跳转但还想使用a标签的话,此时就需要使用@click.prevent方法:

    <view class="example-body">
    	<a href="http://www.baidu.com" @click.prevent='notLink'>百度</a>
    </view>
    

    这时再点击a标签的时候就不会跳转目标地址链接了。

    展开全文
  • 在项目页面中使用 element popover,设置trigger=’click’时点击外部不会触发自动隐藏,但在 element 官网中是可以正常触发的(官方示例),项目中的菜单是自定义写的,所以怀疑是有黑魔法。 查找原因 将 popover...
  • @click.stop Dom子节点往根节点传播叫做冒泡 stop不让冒泡再进行下去 <div @click="click1()" > <a @click.stop="click2()"></a> </div> export default { name: "Home",...

    vue官方文档中对click修饰词的描述比较抽象 简单写了几个例子

    @click.stop Dom子节点往根节点传播叫做冒泡 stop不让冒泡再进行下去

    <div  @click="click1()" >
     <a @click.stop="click2()"></a>
    </div>
    export default {
      name: "Home",
      data() {
        return {}
        },
        methods{
           click1(){
               alert('div事件')
           },
           click2(){
              alert('div内a标签的事件')
           },
        }
      }

    @click.prevent 阻止默认事件a跳转百度的发生,只执行自己定义的方法

    <div id="app6">
      <a type="button" href="http://www.baidu.com" target="_blank" @click.prevent="click()">点我</a >
    </div>
    l
    et app6 = new Vue({
      el:'#app6',
      data:{
      },
      methods:{
        click(){
          alert('按钮被点击')
        },
      }
    });
    
    

    @click.self 只当在 event.target 是当前元素自身时触发处理函数
    加了self的点击方法 只有自己可以触发,子节点点击之后无法触发
    没加self的点击方法 子节点点击之后,也会因为冒泡而触发

    <style>
      .big{
        width: 200px;
        height: 100px;
        background: red;
      }
      .mid{
        width: 80px;
        height: 80px;
        background: yellow;
      }
      .small{
        width: 50px;
        height: 50px;
        background: green;
      }
    
    </style>
    
     <div class="big" id="app" v-on:click.self="outer($event)">
    <!--  <button >最外面的按钮</button>-->
      <div class="mid" @click="medium($event)">
    <!--    <button @click="medium">中间的按钮</button>-->
        <div class="small" v-on:click.self="inner($event)">
        </div>
      </div>
    </div>
    
    let app = new Vue({
      el: '#app',
    
      // 在 `methods` 对象中定义方法
      methods: {
        outer: function (event) {
          alert("最外面的按钮被点了");
          console.log(event.currentTarget);
    
        },
        medium: function (event) {
          alert("中间的按钮被点了")
          console.log(event.currentTarget);
    
        },
        inner: function (event) {
          alert("里面的按钮被点了")
          console.log(event.currentTarget);
    
        },
      }
    })

    后续vue学习之后会继续更新一些官方文档中解释不清晰的地方,如果有什么疑问欢迎私信交流。

    展开全文
  • @click.stop和@click.prevent区别

    千次阅读 2020-06-05 00:08:00
    click.stop stop:指的是阻止父组件(节点)的事件冒泡。。。 <div id="app"> <div class="box" @click="box()"> <div class="box-child" @click="boxchild()"> </div> </div&...

     

    • click.stop

       

    stop:指的是阻止父组件(节点)的事件冒泡。。。

    <div id="app">
        <div class="box" @click="box()">
            <div class="box-child" @click="boxchild()">
            </div>
        </div>
    </div>
    var app = new Vue({
                el: "#app",
                data: {
                    name: "Vue.js"
                },
                methods: {
                    box: function () {
                        alert("this is box event");
                    },
                    boxchild: function () {
                        alert("this is boxchild event");
                    }
                }
        });

    运行结果先alert(boxchild)在alert(box)

    如果用@click.stop,此时子组件(节点)会阻止父组件(节点)的click方法执行,即阻止父节点冒泡

    <div id="app">
        <div  @click="box()">
            <div  @click.stop="boxchild()">
            </div>
        </div>
    </div>
    var app = new Vue({
                el: "#app",
                data: {
                    name: "Vue.js"
                },
                methods: {
                    box: function () {
                        alert("this is box event");
                    },
                    boxchild: function () {
                        alert("this is boxchild event");
                    }
                }
        });

    那结果就值alert(boxchild)了

    • click.prevent

       阻止事件的默认行为,比如click,blur,change。。。

    想去酒吧,就得想办法阻止学习,prevent登场。。(阻止默认学习的惯性思维)

    <a href="http://gostudy.com" @click.prevent="gobar">就不跳转,我要去gobar</a>

    结果愿望实现了。。。

     

    两者有点相似,click.stop是阻止父节点事件的冒泡,click.prevent是阻止自身默认事件的执行,可以自定义方法,想干嘛干嘛。。。

    展开全文
  • 今天小编就为大家分享一篇vue click.stop阻止点击事件继续传播的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • https://blog.csdn.net/weixin_41646716/article/details/90069562
  • vue中阻止冒泡事件 @click.stop.native

    千次阅读 2020-11-12 17:22:03
    直接在其子组件或者子元素上加 @click.stop.native就可以了
  • 用的是ele插件吗?可以试试这个方法 @click.native.stop='edit(row)'
  • @click.stop 阻止事件冒泡 @click.self 阻止自己的冒泡行为,不能阻止人家的冒泡行为 @click.prevent 阻止事件的默认行为 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">...
  • 点击播放却没有播放,但总点进播放器: 代码这里:
  • 2、@click.stop 阻止事件冒泡 //点击child区域时只会执行函数sayChild,不会执行函数sayFather <div class="father" @click="sayFather"> <div class="child" @click.stop="sayChild"> </div> &...
  • 1、@click,绑定监听(单击事件) v-on:click="function" @click="function" @click="function(params)" <button id="test1" @click="test1">test1</button> <!-- params:参数 --> <...
  • }, selectInput(val) { }, change() {}, 小知识点 场景: 点红色区域蓝色会显示出来 点其他区域蓝色会消失 知识点:阻止冒泡事件 @click.stop <template> <view @click="yincang(false)"> ...
  • 简写为@click=“方法名(参数)” 有些情况下会出现父级元素有点击事件、子元素也有点击事件 这样就会出现点击子元素会执行两次方法 正常情况下点击列表的关闭按钮会删除元素 但是它的父元素有点击添加样式的功能 ...
  • div v-on:click="dodo"> <button v-on:click="doThis">阻止单击事件继续传播</button> </div> </div> <script> var app = new Vue({ el: "#app", dat
  • .prevent 用于阻止默认... 上此关键字,click.prevent .capture 冒泡顺序 例如 div1中嵌套div2中嵌套div3 <div id="app" v-on:click="show"> 1 <div id="app2" v-on:click.capture="show2"> 2 ...
  • vue中@click.stop事件的作用

    千次阅读 2019-10-01 16:23:19
    vue click.stop阻止点击事件继续传播 <div id="app"> <div v-on:click="dodo"> <button v-on:click="doThis">阻止单击事件继续传播</button> </div> </div&...
  • uniapp阻止事件冒泡@click.stop失效

    千次阅读 2020-01-07 17:39:50
    配合.native使用:@click.native.stop
  • 一个因@click.stop引发的bug

    千次阅读 2018-12-17 15:43:36
    在项目页面中使用 element popover,设置trigger='click'时点击外部不会触发自动隐藏,但在 element 官网中是可以正常触发的(官方示例),项目中的菜单是自定义写的,所以怀疑是有黑魔法。 查找原因 将 popover 写...
  • 1、绑定监听@click:(以监听click为例,其他如keyup,用法类似)  v-on:click="fun"  @click="fun"  @click="fun(参数)" &lt;button @click="test1"&gt;test...
  • button @click="fn"&gt;测试事件&lt;/button&gt; &lt;a @click.prevent href="https:www.baidu.com"&gt;baidu&lt;/a&gt; &lt;!--失效--&gt;
  • html代码 (内部方法点击加一个.stop...div@click.stop="clickNei()">我是内部点击事件</div> </div> js代码: methods: { clickWai(){ console.log("外边事件点击"); }, clickNei(){ cons...
  • div @click.stop="subTempClick"></div> </div> 盖上遮罩之后不需要下面内容支持滚动 @mousewheel.prevent 表示添加了这个修饰符的标签以下的标签内容无法接受滚动事件 <div class="mask...
  • @click.stop ="" > 账号: < input type ="text" >< br >< br > 密码: < input type ="password" >< br >< br > < input type ="submit" value ="提交" > div > div > div > < script ...
  • 一.vue @click.native native就是把组件变回原生DOM的一种方式,相当于给组件绑定原生事件 // 父组件.vue <tree @click.native="clickTree"></tree> // 如果不使用.native,在子组件tree上绑定click是...
  • click.stop 阻止事件冒泡与click.prevent 阻止执行默认事件 自己总是记不住,写了个小demo加强记忆 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 72,524
精华内容 29,009
关键字:

@click.stop