vue 中 event.stopPropagation() 和event.preventDefault() 使用


1.event.stopPropagation()方法

這是阻止事件的冒泡方法,不讓事件向document上蔓延,但是默認事件任然會執行,當你掉用這個方法的時候,如果點擊一個連接,這個連接仍然會被打開,

 

2.event.preventDefault()方法

這是阻止默認事件的方法,調用此方法是,連接不會被打開,但是會發生冒泡,冒泡會傳遞到上一層的父元素;

 

3.return false ;

這個方法比較暴力,他會同事阻止事件冒泡也會阻止默認事件;寫上此代碼,連接不會被打開,事件也不會傳遞到上一層的父元素;可以理解為return false就等於同時調用了event.stopPropagation()和event.preventDefault()

 

案例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <a href="//caibaojian.com/w3school/" @click="btn($event)">W3School</a>
            <p>preventDefault() 方法將防止上面的鏈接打開 URL。</p>
        </div>
    </body>
    <script>
        new Vue({
            el: '#app',
            methods: {
                btn(event) {
                    //event.preventDefault()
                    event.stopPropagation();  //如果是連接還是會打開
                    console.log(event.type);
                }
            }
        })
    </script>
</html>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM