Vue2学习笔记:事件对象、事件冒泡、默认行为

1.事情对象

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="http://unpkg.com/vue/dist/vue.js"></script>

    <script type="text/javascript">
        window.onload = function(){
            var vm = new Vue({
                el:‘#box‘,
                methods:{
                    show:function(event){
                        console.log(event);   //event   这个就是事件对象了
                    }
                }
            });
        }
    </script>
</head>
<body>
   <div id="box">
        <input type="button" value="按钮" @click="show($event)">
    </div>
</body>
</html>

通过show($event)把事件对象传到方法里

2.事件冒泡

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="http://unpkg.com/vue/dist/vue.js"></script>

    <script type="text/javascript">
        window.onload = function(){
            var vm = new Vue({
                el:‘#box‘,
                methods:{
                    show:function(){
                        alert(1);
                    },
                    show1:function(){
                        alert(2);
                    }
                }
            });
        }
    </script>
</head>
<body>
    <div id="box">
        <div @click="show1()">
            <input type="button" value="按钮" @click="show()">
        </div>
    </div>
</body>
</html>

点击按钮的话他会，执行show ,show1方法，依次弹出1，2。

怎么来阻止

<1> 利用我们上面讲过的event对象: event.cancelBubble = true; //这种就阻止了

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="http://unpkg.com/vue/dist/vue.js"></script>

    <script type="text/javascript">
        window.onload = function(){
            var vm = new Vue({
                el:‘#box‘,
                methods:{
                    show:function(event){
                        alert(1);
                        event.cancelBubble = true;
                    },
                    show1:function(){
                        alert(2);
                    }
                }
            });
        }
    </script>
</head>
<body>
   <div id="box">
        <div @click="show1()">
            <input type="button" value="按钮" @click="show($event)">
        </div>
    </div>
</body>
</html>

<2>利用vue的方法阻止冒泡：给HTML元素绑定click事件的时候，改为@click.stop="show()"

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="http://unpkg.com/vue/dist/vue.js"></script>

    <script type="text/javascript">
        window.onload = function(){
            var vm = new Vue({
                el:‘#box‘,
                methods:{
                    show:function(event){
                        alert(1);
                        //event.cancelBubble = true;
                    },
                    show1:function(){
                        alert(2);
                    }
                }
            });
        }
    </script>
</head>
<body>
    <div id="box">
        <div @click="show1()">
            <input type="button" value="按钮" @click.stop="show()">
        </div>
    </div>
</body>
</html>

3.默认行为

比如contextmenu右键菜单

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <!-- // <script src="vue.js"></script> -->
    <script src="http://unpkg.com/vue/dist/vue.js"></script>

    <script type="text/javascript">
        window.onload = function(){
            var vm = new Vue({
                el:‘#box‘,
                methods:{
                    show:function(){
                        alert(1);
                    },
                    show1:function(){
                        alert(2);
                    }
                }
            });
        }
    </script>
</head>
<body>
    <div id="box">
        <input type="button" value="按钮" @contextmenu="show()">
        <input type="button" value="按钮1" @contextmenu.prevent="show1()"> 

        <p>//按钮右击点下去会依次出现 弹窗 1， 还有右击的默认菜单</p>
        <p>//按钮1右击只出现 弹窗 2</p>
    </div>
</body>
</html>

时间： 2024-10-25 17:43:55

Vue2学习笔记:事件对象、事件冒泡、默认行为的相关文章

iOS学习笔记之触摸事件&UIResponder

iOS学习笔记之触摸事件&UIResponder 触摸事件与触摸事件相关的四个方法如下: 一根手指或多根手指触摸屏幕 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event; 一根手指或多根手指在屏幕上移动(随着手指的移动,相关的对象会持续发送该消息) -(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event; 一根手指或多根手指离开屏幕 -(void)

简单总结焦点事件、Event事件对象、冒泡事件

每学习一些新的东西,要学会复习,总结和记录. 今天来简单总结一下学到的几个事件:焦点事件.Event事件对象.冒泡事件其实这几个事件应该往深的说是挺难的,但今天主要是以一个小菜的角度去尝试理解一些基本的知识点. 1.焦点事件: 1.1概念理解: 想象场景:当一堆text文本框出现在面前,当点击其中一个文本框,它就会响应用户,并出现光标闪动(这时,点击令它获得焦点). 所以说:焦点事件是用来让浏览器区分哪一个对象是用户要进行操作(输入值.选择.跳转)的. 总结===> 浏览器(区分)哪一个对象

Python学习笔记_Python对象

Python学习笔记_Python对象 Python对象标准类型其他内建类型类型对象和type类型对象 Python的Null对象None 标准类型操作符对象值的比较对象身份比较布尔类型标准类型的内建函数 typeObj cmpobj1 obj2 strobj reprobj typeobj isinstanceobj 标准类型的分类存储模型更新模型访问模型不支持的类型 Python学习笔记_Python对象首先来理解一个通俗的含义,什么是对象?其实对象无论在什么语言里面

javascript学习笔记---ECMAScriptECMAScript 对象----定义类或对象

使用预定义对象只是面向对象语言的能力的一部分,它真正强大之处在于能够创建自己专用的类和对象. ECMAScript 拥有很多创建对象或类的方法. 原始的方式因为对象的属性可以在对象创建后动态定义(后绑定),类似下面的代码: var oCar = new Object; oCar.color = "blue"; oCar.doors = 4; oCar.mpg = 25; oCar.showColor = function() { alert(this.color); };不过这里有一

初探swift语言的学习笔记(类对象，函数)

swift扩展了很多功能和属性,有些也比较奇P.只有慢慢学习,通过经验慢慢总结了. 下面将初步学习一下类的写法. 码工,最大爱好就是看码,而不是文字,太枯燥. // // computer.swift // swiftDemo // // Created by apple on 14-6-8. // Copyright (c) 2014年 fengsh. All rights reserved. /* 写本例子的目的在于快速学习swift类的写法,包括知识点: 1.属性设置 2.构造.释构 3.

javascript学习笔记---ECMAScriptECMAScript 对象----修改对象

通过使用 ECMAScript,不仅可以创建对象,还可以修改已有对象的行为. prototype 属性不仅可以定义构造函数的属性和方法,还可以为本地对象添加属性和方法. 创建新方法通过已有的方法创建新方法Number.prototype.toHexString = function() { return this.toString(16); }; 在此环境中,关键字 this 指向 Number 的实例,因此可完全访问 Number 的所有方法.有了这段代码,可实现下面的操作: var iNu

Swift 2.0学习笔记（Day 37）——默认构造函数

Swift 2.0学习笔记(Day 37)--默认构造函数原创文章,欢迎转载.转载请注明:关东升的博客结构体和类的实例在构造过程中会调用一种特殊的init方法,称为构造函数.构造函数没有返回值,可以重载.在多个构造函数重载的情况下,运行环境可以根据它的外部参数名或参数列表调用合适的构造函数.默认构造函数结构体和类在构造过程中会调用一个构造函数,即便是没有编写任何构造函数,编译器也会提供一个默认的构造函数.下面看示例代码: class Rectangle { var width: Double

vue教程1-05 事件简写、事件对象、冒泡、默认行为、键盘事件

v-on:click/mouseover...... 简写的: @click="" 推荐事件对象: @click="show($event)" 事件冒泡: 阻止冒泡: a). ev.cancelBubble=true; b). @click.stop 推荐默认行为(默认事件): 阻止默认行为: a). ev.preventDefault(); b). @contextmenu.prevent 推荐键盘: @keydown $event ev.keyCode @

《学习笔记》JS事件和事件冒泡

js事件详解 ●一般事件 onclick 鼠标点击时触发此事件 ondblclick 鼠标双击时触发此事件 onmousedown 按下鼠标时触发此事件 onmouseup 鼠标按下后松开鼠标时触发此事件 onmouseover 当鼠标移动到某对象范围的上方时触发此事件 onmousemove 鼠标移动时触发此事件 onmouseout 当鼠标离开某对象范围时触发此事件 onkeypress 当键盘上的某个键被按下并且释放时触发此事件. onkeydown 当键盘上某个按键被按下时触发此事件 o