Vue-事件修饰符（冒泡，默认行为）

最新推荐文章于 2024-05-15 06:34:37 发布

cc&

最新推荐文章于 2024-05-15 06:34:37 发布

阅读量524

点赞数

文章标签： vue.js html 前端

本文链接：https://blog.csdn.net/grow_/article/details/121365779

版权

冒泡事件：事件的响应像水泡一样上升至最顶级对象。

js阻止冒泡：event.stopPropagation();

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Vue基本使用</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
    <!-- 引入vue.js -->
    <script src="js/vuejs-2.5.16.js"></script>
</head>

<body>
    <div id="app">
        <div>{{num}}</div>
        <!-- 事件定义到了handler0，但点击“点击3”仍然可以num++ -->
        <div v-on:click='handler0'>
            <div v-on:click='handler1'>
                <button @click='handler2'>点击3</button>
            </div>
        </div>

    </div>

    <script>
        var vue = new Vue({
            // 元素的挂载位置（值可以是Css选择器或DOM元素）
            el: '#app',
            // 模型数据（值是一个对象）
            data: {
                num: 0
            },
            methods: {
                handler0: function () {
                    this.num++;
                },
                handler1: function (event) {
                    //event.stopPropagation();
                },
                handler2: function (event) {

                }
            }
        });
    </script>
</body>

</html>

Vue中用v-on:click.stop='handler'阻止冒泡

      <div v-on:click='handler0'>
            <div v-on:click.stop='handler1'>
                <button @click='handler2'>点击3</button>
            </div>
        </div>

         handler1: function (event) {
                    //event.stopPropagation();
                },

默认行为：用户某些动作后，标签自动发生的行为在HTML标签中，有些元素拥有自己的默认行为，如：1、超级链接标签：单击后可以实现跳转到指定url页面； 2、submit提交按钮：单击后可以提交表单数据到指定页面中

取消默认事件：event.preventDefault(）；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Vue基本使用</title>
    <!-- 引入vue.js -->
    <script src="js/vuejs-2.5.16.js"></script>
</head>

<body>
    <div id="app">

        <a href="http://www.baidu.com" v-on:click='handler3'>百度</a>
    </div>

    <script>
        var vue = new Vue({
            // 元素的挂载位置（值可以是Css选择器或DOM元素）
            el: '#app',
            // 模型数据（值是一个对象）
            data: {
               
            },
            methods: {
                handler3: function (event) {
                    event.preventDefault();
                }
            }
        });
    </script>
</body>

</html>

Vue中阻止默认行为：v-on:click.prevent='handler'

  <div id="app">
        <a href="http://www.baidu.com" v-on:click.prevent='handler3'>百度</a>
    </div>

    methods: {
                handler3: function (event) {

                }
            }

cc&

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue-事件修饰符（冒泡，默认行为）

冒泡事件：事件的响应像水泡一样上升至最顶级对象。js阻止冒泡：event.stopPropagation();<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue基本使用</title> <style> [v-cloak] { display: none;
复制链接

扫一扫