Vue（四）、事件修飾符

事件修飾符

• .stop：等同於JS中的event.stopPropagation()，阻止事件冒泡
• .prevent：等同於JS中的event.preventDefault()，阻止默認事件
• .capture：添加事件偵聽器時使用事件捕獲模式
• .self：只當事件在該元素本身（比如不是子元素）觸發時觸發回調
• .once：事件只觸發一次

.stop阻止事件冒泡

    <div id="app">
        <!-- 使用 .stop 阻止冒泡 -->
        <div class="inner" @click="divHandler">
            <input type="button" value="戳他" @click.stop="btnHandler">
        </div>
    </div>

    <script>
        var vm = new Vue({
            el:'#app',
            data:{},
            methods:{
                divHandler(){
                    console.log('這是觸發了 inner div 的點擊事件');
                },
                btnHandler(){
                    console.log('這是觸發了 btn div 的點擊事件');
                }
            }
        })
    </script>

.prevent阻止默認行爲

    <div id="app">
        <!-- 使用 .prevent 阻止默認行爲 -->        
        <a href="http://www.baidu.com" @click.prevent="linkClick">百度</a>
    </div>

    <script>
        var vm = new Vue({
            el:'#app',
            data:{},
            methods:{
                linkClick(){
                    console.log('這是觸發了 鏈接 的點擊事件');
                }
            }
        })
    </script>

.capture實現捕獲觸發

        <!-- 使用 .capture 實現捕獲觸發事件的機制，與冒泡相反 -->  
        <div class="inner" @click.capture="divHandler">
            <input type="button" value="戳他" @click="btnHandler">
        </div>

    <script>
        var vm = new Vue({
            el:'#app',
            data:{},
            methods:{
                divHandler(){
                    console.log('這是觸發了 inner div 的點擊事件');
                },
                btnHandler(){
                    console.log('這是觸發了 btn div 的點擊事件');
                }
            }
        })
    </script>

.capture實現只有點擊當前元素時，纔會觸發事件

        <!-- 使用 .self 實現只有點擊當前元素的時候，纔會觸發事件處理函數 -->
        <div class="inner" @click.self="divHandler">
            <input type="button" value="戳他" @click="btnHandler">
        </div>

    <script>
        var vm = new Vue({
            el:'#app',
            data:{},
            methods:{
                divHandler(){
                    console.log('這是觸發了 inner div 的點擊事件');
                },
                btnHandler(){
                    console.log('這是觸發了 btn div 的點擊事件');
                }
            }
        })
    </script>

.once只觸發一次事件處理函數

        <!-- 使用 .once 只觸發一次事件處理函數 -->
        <a href="http://www.baidu.com" @click.prevent.once="linkClick">百度</a>

    <script>
        var vm = new Vue({
            el:'#app',
            data:{

            },
            methods:{
                divHandler(){
                    console.log('這是觸發了 inner div 的點擊事件');
                },
                btnHandler(){
                    console.log('這是觸發了 btn 按鈕 的點擊事件');
                },
                linkClick(){
                    console.log('這是觸發了 鏈接 的點擊事件');
                }
            }
        })
    </script>

注意：.self 只會阻止自己身上冒泡行爲的觸發，並不會真正阻止 冒泡的行爲