事件修饰符

最新推荐文章于 2024-04-04 11:02:50 发布

Issssy

最新推荐文章于 2024-04-04 11:02:50 发布

阅读量371

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/Issssy/article/details/128033667

版权

一.事件修饰符

event.preventDefault()/阻止默认行为或者event.stopPropagation()/阻止事件冒泡

以上方法需要处理DOM事件细节，代码繁琐

为了解决这个问题，Vue.js提供了事件修饰符

修饰符是以点开头的指令后缀来表示的

.stop 阻止事件冒泡继续传播

<a v-on:click.stop="doThis"></a>

.self 当事件目标是当前元素自身时，触发事件

<ul @click.self="ulClick"></ul>

.capture 将原本默认的冒泡方式改为捕捉方式

.prevent 阻止事件默认行为

@submit.prevent 提交事件不在重载页面

<form v-on:click.stop.prevent="onSubmit"></form>

.stop.prevent 修饰符可以串联，既阻止冒泡又阻止默认行为

<a v-on:click.stop.prevent="doThat"></a>

只有修饰符

 <form v-on:submit.prevent></form>

二.事件修饰符的使用

<body>
    <div id="app" @click="divClick">
        <ul @click="ulClick">
            <!-- 事件修饰符 -->
            <!-- .stop 阻止事件冒泡 -->
            <li @click="liClick">111</li>
            <li>222</li>
            <li>333</li>
        </ul>
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            methods:{
                divClick(){
                    console.log('div');
                },
                ulClick(){
                    console.log('ul');
                },
                liClick(){
                    console.log('li');
                    // JS原生写法
                    // evt.stopPropagation()
                }
            }
        })
    </script>
</body>

<body>
    <div id="app">
        <ul @click.self="ulClick">
            <!-- 事件修饰符.self:当前事件的目标是当前元素自身，才会触发 -->
            <!-- < @click.self="ulClick"> -->

            <!-- <li @click="liClick">111</li> -->

            <!-- 使用vue方式阻止事件冒泡 -->
            <!-- 事件修饰符.stop：阻止事件冒泡 -->
            <li @click.stop="liClick">111</li>
            <li @click="liClick">222</li>
            <li>333</li>
        </ul>
    </div>

    <script src="./vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            methods:{
                // liClick(){
                //     console.log('li');
                // },
                ulClick(){
                    console.log('ul');
                },
                liClick(evt){
                    console.log('li');
                    // evt.stopPropagation()
                },
            }
        })
    </script>
</body>

三.鼠标事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }

        div{
            width: 200px;
            height: 200px;
            background: rgb(229, 251, 132);
            text-align: center;
            line-height: 40px;
            color: blueviolet;
        }
    </style>
</head>
<body>
    <div>鼠标移入</div>
    <script>
        let mouse = document.querySelector('div');
        // 鼠标移入
        mouse.onmouseover = function(){
            mouse.style.background = 'black'
        }
        // 鼠标移出
        mouse.onmouseout = function(){
            mouse.style.background = 'rose red'
        }
        // 鼠标移动
        mouse.onmousemove = function(e){
            // 事件对象
            e = e ||window.event
            // 打印光标位置
            console.log(e.offsetX,e.offsetY);
        }
        // 左键按下
        document.onmousemove = function(e){
            e = e ||window.event
            // 打印光标位置
            console.log('x',e.offsetX,'y',e.offsetY);
        }
        // 左键抬起
        document.onmouseup = function(){
            console.log('mouseup');
            document.onmousemove = null
        }
    </script>
</body>
</html>

四.实例

计算正方形面积

<body>
    <div id="app">
        <!-- 方法一：以内联方式响应事件 -->
        <!-- <button v-on:click="length++">改变边长</button> -->

        <!-- 方法二：绑定方法处理事件 -->
        <button v-on:click="changeLength">改变边长</button>
        <p>正方形的边长是{{ length }},面积是{{ area }}</p>
    </div>

    <script src="./vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                length:2
            },
            computed:{
                area(){
                    return this.length*this.length
                }
            },
            methods:{
                changeLength(){
                    this.length++
                }
            }
        })
    </script>
</body>

Issssy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件修饰符

event.preventDefault()/阻止默认行为或者event.stopPropagation()/阻止事件冒泡。.stop.prevent 修饰符可以串联，既阻止冒泡又阻止默认行为。为了解决这个问题，Vue.js提供了事件修饰符。.self 当事件目标是当前元素自身时，触发事件。@submit.prevent 提交事件不在重载页面。.capture 将原本默认的冒泡方式改为捕捉方式。修饰符是以点开头的指令后缀来表示的。.prevent 阻止事件默认行为。.stop 阻止事件冒泡继续传播。
复制链接

扫一扫