zoukankan      html  css  js  c++  java
  • vue3事件

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>智能社——http://www.zhinengshe.com</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,b){
                            alert(ev.clientX);
                            alert(b);
                        }
                        show2:function(){
                            alert(2);
                        }
                    }
                });
            };
        </script>
    </head>
    <body>
        <div id="box">
            <input type="button" value="按钮" @click="show($event,12)">
            <input type="button" value="按钮" @click="show()">
            <!--  v-on:click="show()"简写  -->
        </div>
    </body>
    </html>
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>智能社——http://www.zhinengshe.com</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.cancelBubble=true;//阻止冒泡
                        },
                        show2:function(){
                            alert(2);
                        }
                    }
                });
            };
        </script>
    </head>
    <body>
        <div id="box">
            <div @click="show2()">   //冒泡
                <input type="button" value="按钮" @click="show($event)">
            </div>
        </div>
    </body>
    </html>
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>智能社——http://www.zhinengshe.com</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);
                        },
                        show2:function(){
                            alert(2);
                        }
                    }
                });
            };
        </script>
    </head>
    <body>
        <div id="box">
            <div @click="show2()">
                <input type="button" value="按钮" @click.stop="show()">  简写方式,阻止冒泡,
            </div>
        </div>
    </body>
    </html>
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>智能社——http://www.zhinengshe.com</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)">    //contextmenu右键点击
        </div>
    </body>
    </html>
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>智能社——http://www.zhinengshe.com</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>
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>智能社——http://www.zhinengshe.com</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(ev.keyCode);
                            if(ev.keyCode==13){
                                alert('您按回车了');
                            }
                        }
                        show1:function(){
                            alert('您按回车了');
                        }
                        show2:function(){
                            alert('您按回车了');
                        }
                        show3:function(){
                            alert(1);
                        }
                    }
                });
            };
        </script>
    </head>
    <body>
        <div id="box">
            <input type="text" @keydown="show">
            <input type="text" @keydown="show($event)">
            <input type="text" @keyup="show($event)">
            <input type="text" @keyup.13="show1()">
            <input type="text" @keyup.enter="show2()">
            <input type="text" @keyup.left="show3()">
            <input type="text" @keyup.up="show3()">
        </div>
    </body>
    </html>
  • 相关阅读:
    微信 播放视频
    json与页面动态绑定
    layer mobile开发layer.full
    Layer 使用
    分享一段,图片加水印的代码。本人修改过多次
    jenkins .net linux
    Jenkins .net windows
    《微服务-架构与实践》
    分布式网站架构
    Go 并发随机打印1-n
  • 原文地址:https://www.cnblogs.com/yaowen/p/6974056.html
Copyright © 2011-2022 走看看