zoukankan      html  css  js  c++  java
  • Vue之阻止默认行为

    1.使用原生js实现点击右键阻止默认行为

    <!DOCTYPE html>  
    <html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">  
        <meta name="apple-mobile-web-app-capable" content="yes">  
        <meta name="apple-mobile-web-app-status-bar-style" content="black">  
        <style>  
      
        </style>  
        <script src="vue.js"></script>  
        <script>  
            window.onload=function(){  
                new Vue({  
                    el:'#box',  
                    data:{  
      
                    },  
                    methods:{  
                        show:function(ev){  
                            alert(1);  
                            ev.preventDefault();  
                        }  
                    }  
                });  
            };  
        </script>  
    </head>  
    <body>  
        <div id="box">  
            <input type="button" value="按钮" @contextmenu="show($event)">  
        </div>  
    </body>  
    </html>  

    描述:

    使用原生js中的ev.preventDefault()  阻止默认行为

    2.Vue中使用  .prevent  阻止默认行为

    <!DOCTYPE html>  
    <html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">  
        <meta name="apple-mobile-web-app-capable" content="yes">  
        <meta name="apple-mobile-web-app-status-bar-style" content="black">  
        <style>  
      
        </style>  
        <script src="vue.js"></script>  
        <script>  
            window.onload=function(){  
                new Vue({  
                    el:'#box',  
                    data:{  
      
                    },  
                    methods:{  
                        show:function(){  
                            alert(1);  
                        }  
                    }  
                });  
            };  
        </script>  
    </head>  
    <body>  
        <div id="box">  
            <input type="button" value="按钮" @contextmenu.prevent="show()">  
        </div>  
    </body>  
    </html>  
  • 相关阅读:
    56. Merge Intervals
    Arpa’s letter-marked tree and Mehrdad’s Dokhtar-kosh paths CodeForces
    CodeForces 1328E-Tree Queries【LCA】
    2^x mod n = 1 HDU
    CodeForces 1327D
    CodeFoeces 1327E
    AtCoder Beginner Contest 159 E
    牛客14648-序列【莫比乌斯反演+容斥定理】
    完全平方数 HYSBZ
    MongoDB学习笔记(六、MongoDB复制集与分片)
  • 原文地址:https://www.cnblogs.com/chaofei/p/7706756.html
Copyright © 2011-2022 走看看