快捷導(dǎo)航

vue子元素綁定的事件, 阻止觸發(fā)父級上的事件處理方式

更新時(shí)間：2023年11月15日 10:05:22 作者：phpzx.cn

這篇文章主要介紹了vue子元素綁定的事件, 阻止觸發(fā)父級上的事件處理方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue子元素綁定的事件,阻止觸發(fā)父級上的事件處理

index1.html

<html>
<head>
<style>
    .parent{
        width:200px;
        background:#ffc;
    }
 
    .child{
        list-style: none;
        border:1px solid red;
    }
</style>    
 
<script src="../../libs/vue.js"></script>
<script>
/*
該用例 li的點(diǎn)擊事件, 在li本身綁定的事件發(fā)生完, 會(huì)觸發(fā)父級ul上綁定的事件(冒泡)
index2-4 將會(huì)用3種方式進(jìn)行解決
*/
</script>
 
</head>
<div id="app">
   <ul class="parent" @click="parent">
       <li class="child" @click="child">1</li>
       <li class="child" @click="child">2</li>
       <li class="child" @click="child">3</li>
   </ul>
</div>
 
<script>
    var App = new Vue({
        el:"#app",
        data:{},
        methods:{
            parent(){
                alert('this is parent')
            },
            child(){
                alert('this is child')
            }
        }
    })
</script>
 
 
</html>

預(yù)覽效果：

index2.html

<html>
<head>
<style>
    .parent{
        width:200px;
        background:#ffc;
    }
 
    .child{
        list-style: none;
        border:1px solid red;
    }
</style>    
 
<script src="../../libs/vue.js"></script>
<script>
/*
解決方法一 :
在vue級子級元素綁定事件用阻止冒泡, @click.stop="fn"
*/
</script>
</head>
<div id="app">
   <ul class="parent"   @click="parent">
       <li class="child" @click.stop="child">1</li>
       <!--在子元素中，綁定一個(gè)阻止冒泡的點(diǎn)擊事件 @click.stop-->
       <li class="child" @click.stop="child">2</li>
       <li class="child" @click.stop="child">3</li>
       
   </ul>
</div>
 
<script>
    var App = new Vue({
        el:"#app",
        data:{},
        methods:{
            parent(){
                alert('this is parent')
            },
            child(){
                alert('this is child')
            }
           
        }
    })
</script>
 
 
 
 
</html>

index3.html

<html>
<head>
<style>
    .parent{
        width:200px;
        background:#ffc;
    }
 
    .child{
        list-style: none;
        border:1px solid red;
    }
</style>    
 
<script src="../../libs/vue.js"></script>
<script>
/*
解決方式二: vue父級元素綁定事件, 傳入$event參數(shù)
在父級綁定的件事處理方法中, 進(jìn)行判斷event.currentTarget 與event.target 是不是全等
如果全等, 就說明是父級上觸發(fā)的點(diǎn)擊事件
event.currentTarget -- 綁定事件的dom
event.target        -- 當(dāng)前點(diǎn)擊的dom
*/
</script>
 
</head>
<div id="app">
   <ul class="parent" @click="parent($event)">
       <li class="child" @click="child">1</li>
       <li class="child" @click="child">2</li>
       <li class="child" @click="child">3</li>
   </ul>
</div>
 
<script>
    var App = new Vue({
        el:"#app",
        data:{},
        methods:{
            parent(event){
                let event1 = event.currentTarget;
                let event2 = event.target;
                if(event1 == event2) {
                    alert('this is parent')
                }
            },
            child(){
                alert('this is child')
            }
        }
    })
</script>
 
 
</html>

index4.html

<html>
<head>
<style>
    .parent{
        width:200px;
        background:#ffc;
    }
 
    .child{
        list-style: none;
        border:1px solid red;
    }
</style>    
 
<script src="../../libs/vue.js"></script>
<script>
/*
解決方式三: 子元素綁定事件傳入$event , 處理器中進(jìn)行阻止冒泡傳遞
event.stopPropagation();
*/
</script>
 
</head>
<div id="app">
   <ul class="parent" @click="parent">
       <li class="child" @click="child($event)">1</li>
       <li class="child" @click="child($event)">2</li>
       <li class="child" @click="child($event)">3</li>
   </ul>
</div>
 
<script>
    var App = new Vue({
        el:"#app",
        data:{},
        methods:{
            parent(){
               alert('this is parent')
            },
            child(event){
                alert('this is child');
                event.stopPropagation();
            }
        }
    })
</script>
 
 
</html>