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>  
  • 相关阅读:
    w3c盒子模型与ie盒子模型
    前端入门
    连接数据库好用工具
    前端开发工具
    刚发现的取色工具
    使用val()另一个妙用------选中select/checkbox/radio的值
    z-index的妙用
    react生命周期函数
    react中虚拟dom的diff算法
    React中的虚拟DOM
  • 原文地址:https://www.cnblogs.com/chaofei/p/7706756.html
Copyright © 2011-2022 走看看