Vue以及JS键盘阻止事件

阅读原文时间：2021年04月24日阅读：1

键盘按下事件：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Vue以及JS键盘阻止事件</title>
        <script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
    </head>
    <body>
        <div id="app">
            Vue：<input type="text" v-on:keydown="fun($event)" />
            //.enter   .tab   .delete (捕获“删除”和“退格”键)   .esc  .space  .up   .down   .left  .right都可以捕获
            Vue：<input type="text" @keydown.enter="fun2" />
            传统Js：<input type="text" onkeydown="fun1()" />
        </div>
    </body>
    <script type="application/javascript">
        new Vue({
            el:"#app",
            data:{
                link:"https://www.baidu.com",
            },
            methods:{
                fun:function(event){
                    var keycode = event.keyCode ;
                    if (keycode < 48 || keycode > 57) {
                        event.preventDefault(); 
                    }
                },
                fun2:function(){
                    alert("按下的是回车")
                }
            }
        })
        //传统JS的键盘按下事件
        function fun1(){
            var keycode = event.keyCode ;
            if (keycode < 48 || keycode > 57) {
                event.preventDefault(); 
            }
        }
    </script>
</html>

鼠标悬停事件：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>v-on:mouseover</title>
        <script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <!-- @mouseover为v-on:mouseover缩写方式 -->
            <div @mouseover="fun1" id="div1">
                <textarea v-on:mouseover.stop="fun3($event)">这是一个文件域</textarea>
            </div>
            <br />
            <div onmouseover="divmouseover()" id="div2">
                <textarea onmouseover="fun2()">这是一个文件域</textarea>
            </div>
        </div>
        <style type="text/css">
            #div2{
                background-color: red;
                width: 300px;
                height: 300px;
            }
            #div1{
                background-color: yellow;
                width: 300px;
                height: 300px;
            }
        </style>
    </body>
    <script type="application/javascript">
        new Vue({
            el:"#app",
            data:{
            },
            methods:{
                fun1:function(){
                    alert("鼠标悬停到div上");
                },
                fun3:function(event){
                    alert("鼠标悬停到textarea上");
                    //阻止此程序以下操作
                    //加v-on:mouseover.stop的话可以省略以下代码
                    event.stopPropagation();
                }
            }
        });

        //传统的JS方式
        function divmouseover(){
            alert("鼠标移动到div上")
        }
        function fun2(){
            alert("鼠标移动到textarea上");
            //阻止此程序以下操作
            event.stopPropagation();
        }
    </script>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>v-on:mouseover</title>
        <script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <div id="div1"></div>
            <div id="div2"></div>
            <div v-text="message"></div>
            <div v-html="message"></div>
            <font size="5" v-bind:color="ys1">老赵</font>
            <font size="5" :color="ys2">老刘</font>
        </div>
    </body>
    <script type="application/javascript">
        new Vue({
            el:"#app",
            data:{
                message:"<h1>嘻嘻嘻</h1>",
                //要想给HTML标签的属性设置变量的值，需要使用v-bind
                //v-bind也可以简化 直接使用：
                ys1:"red",
                ys2:"green"
            },
            methods:{
            }
        });
        //传统的JS方式
        window.onload = function(){
            document.getElementById("div1").innerHTML="<h1>Hello</h1>"
            document.getElementById("div2").innerText="<h1>Hello</h1>"
        }
    </script>
</html>