stop事件修饰符

stop事件修饰符

修饰符 说明
.stop 阻止冒泡

stop事件修饰符具体介绍

.stop

.stop用来防止冒泡


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <script src="./lib/vue-2.4.0.js">script>
    <style>
            .inner {
              height: 150px;
              background-color: gold;
            }
        
            .outer {
              padding: 40px;
              background-color: red;
            }
          style>
head>
<body>
    
    <div id="app">
            <div class="inner" @click="div1Handler">
                    <input type="button" value="点击" @click="btnHandler">
            div>
    div>
    <script>
        var vm = new Vue({
            el:"#app",
            data: {

            },
            methods: {
                div1Handler() {
                    console.log('这是触发了 inner div 的点击事件')
                },
                btnHandler() {
                    console.log('这是触发了 btn 按钮 的点击事件')
                }
            }
        })
    script>
body>
html>

页面操作效果

stop事件修饰符_第1张图片
我们看到不光点击按钮的点击事件触发了,而且父容器div的点击事件也触发了,这时我们就可以使用.stop来阻止这个冒泡了,如下
stop事件修饰符_第2张图片
在访问测试
stop事件修饰符_第3张图片
通过输出可以看到点击事件没有往上冒泡了!

你可能感兴趣的:(vue)