Loading

Vue.js------------------4vue事件

vue事件

一：事件简介

之前都是@click=function，出发单击事件

而@clisck="funciton($event)"可以获得js的原生事件，因为有的时候并不是事件在哪里出发就在哪里处理，那样会很笨

例如扫雷，一个大的div里面包含100个div，难道每个小div都要写一个单击事件？

此时应该把事件绑定在外面的大div上，当内部div的事件冒泡到大的div，既然统一进行处理，你要知道这个事件来自于哪里　　

但是还有一个问题，冒泡到你处理的位置，还会继续冒泡么？是的，就算处理了还是会继续冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./bower_components/vue/dist/vue.min.js"></script>
</head>
<body>
    <!-- 冒泡中 -->
    <!-- <div id="app">
        <div @click="func($event)">
            <input type="button" value="按钮1">
            <input type="button" value="按钮2">
            <input type="button" value="按钮3">
        </div>
    </div> -->

    <!-- 只要不设置停止，就会一直向上冒
    加上.stop才会停止 -->
    <div id="app">
        <div @click="func2">
            <!-- <div @click="func($event)"> -->
            <div @click.stop="func($event)">
                <input type="button" value="按钮1">
                <input type="button" value="按钮2">
                <input type="button" value="按钮3">
            </div>
        </div>
        <!-- 阻止标签的默认行为 -->
        <a href="www.baidu.com" @click.prevent="func3">百度</a>
    </div>


    <script>
        var m = {

        };
        var vm = new Vue({
            el: "#app",
            data: m,
            methods: {
                func: function(event){
                    console.log(event,event.target);
                    console.log("冒泡中");
                    
                    
                },
                func2: function(event){
                    console.log("冒泡中2。。");
                    
                },

                func3: function(){
                    alert("阻止跳转");
                }
                
            }
        });
    </script>
</body>
</html>
View Code

事件加下面的配合的更精准

.prevent 阻止默认的行文

.enter  按enter触发此事件

.left 下面这三个是鼠标的左右键或者中键触发事件

.right

.middle

.once 仅触发一次，就不再触发

.ctrl

.shift

.alt

 

posted @ 2020-06-24 18:34  浅忆尘  阅读(148)  评论(0)  编辑  收藏  举报