Vue的事件:获取事件对象$event;

事件冒泡:事件会向上传播

原生js阻止事件冒泡,需要先获取事件对象,再调用stopPropagation()方法;

vue事件修饰符stop,例@clik.stop;

事件默认行为:

原生js方式需要获取事件对象,再调用preventDefault()方法;

在vue中则使用修饰符prevent,例@clik.prevent

先在button中加入获取对象$event

在控制台可以打印出该事件,可以看出target中有innerHTML

通过e.target.innerHTML,获取button标签上的名称:

vue;

<script>
window.onload= () =>{ let vm=new Vue({
el:'#two',
data:{
result:0 },
methods:{ show(e){ alert("欢迎来到perfect*博客园!!!");
console.log('欢迎来到perfect*博客园!!!');
console.log(e.target.innerHTML);
}, add(a,b){
console.log("add");
console.log(this==vm);
this.result +=a+b; }
}
})
} </script>

html:

<body>
<div id="two">
<button @click="show($event)">欢迎来到perfect*博客园 A</button>
<button @click="show($event)">欢迎来到perfect*博客园 B</button> <button @click="add(1,2)">进行绑定数据相加的方法add()</button>
result:{{result}} </div>
</body>

绑定mouseenter时可以一直触发

<button @mouseenter="add(10,20)">进行绑定数据相加的方法add()</button><br/>
result:{{result}}<br/>

当使用once时只能触发一次,之后鼠标进入时无效果:

<button @mouseenter.once="add(10,20)">进行绑定数据相加的方法add()</button><br/>
result:{{result}}<br/>

事件冒泡:

点击一个获取对象的事件按钮,会发生调用写的三个方法:

该问题的代码:

<script>
window.onload= () =>{ let vm=new Vue({
el:'#two',
data:{
result:0 },
methods:{ show(e){ console.log('欢迎来到perfect*博客园!!!');
console.log(e.target.innerHTML);
}, showA(){ console.log('欢迎来到perfect*博客园!!!A');
},
showB(){ console.log('欢迎来到perfect*博客园!!!B');
}, }
})
} </script> <body>
<div id="two"> <!--事件冒泡-->
<div @click="showA()"> <div @click="showB()">
<button @click="show($event)">欢迎来到perfect*博客园 A!!!!!!</button>
</div>
</div> </div>
</body>

解决冒泡问题的方法:

vue:在button事件中获取对象的button中的click加.stop即可;

javascript:使用e.stopPropagation();

从图中可以看出来,使用.stop时只使用了show方法

<button @click.stop="show($event)">欢迎来到perfect*博客园 A!!!!!!</button>

JavaScript代码:

    show(e){

                console.log('欢迎来到perfect*博客园!!!');
console.log(e.target.innerHTML);
e.stopPropagation();
}

阻止事件的默认行为

vue:使用.prevent进行阻止;

javascript:使用e.preventDefault()实现;

使用a标签作为示例,初始时可以跳转:

使用.prevent时,怎么点击都不能进行跳转:

HTML:

<!--    阻止事件的默认行为-->
<a href="HelloVue.html" @click.prevent=showLink($event)>Click Link!!!</a>

vue:

showLink(){
console.log("已阻止链接的跳转!!"); }

使用JavaScript的写法效果同上,代码:

HTML:

<!--    阻止事件的默认行为-->
<a href="HelloVue.html" @click=showLink($event)>Click Link!!!</a>

vue:

showLink(e){
console.log("已阻止链接的跳转!!");
e.preventDefault(); }

以上示例所有的代码:

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>event</title>
</head>
<script type="text/javascript" src="../js/vue.js" ></script>
<script>
window.onload= () =>{ let vm=new Vue({
el:'#two',
data:{
result:0 },
methods:{ // show(e){
//
//
// console.log('欢迎来到perfect*博客园!!!');
// console.log(e.target.innerHTML);
// e.stopPropagation();
// }, // add(a,b){
// console.log("add");
// console.log(this==vm);
// this.result +=a+b;
//
// }, //
// showA(){
//
// console.log('欢迎来到perfect*博客园!!!A');
// },
// showB(){
//
// console.log('欢迎来到perfect*博客园!!!B');
// }, showLink(e){
console.log("已阻止链接的跳转!!");
e.preventDefault(); } } })
} </script> <body>
<div id="two">
<!--<button @click="show($event)">欢迎来到perfect*博客园 A</button><br/>
<button @click="show($event)">欢迎来到perfect*博客园 B</button><br/> <button @click="add(1,2)">进行绑定数据相加的方法add()</button><br/>
result:{{result}}<br/> <button @mouseenter.once="add(10,20)">进行绑定数据相加的方法add()</button><br/>
result:{{result}}<br/>
--> <!--事件冒泡-->
<!--<div @click="showA()"> <div @click="showB()">
<button @click="show($event)">欢迎来到perfect*博客园 A!!!!!!</button>
</div>
</div>--> <!-- 阻止事件的默认行为-->
<a href="HelloVue.html" @click=showLink($event)>Click Link!!!</a> </div>
</body>
</html>

$event、事件冒泡、阻止事件的默认行为代码

Vue中的事件与常见的问题处理的更多相关文章

  1. 怎样在 Vue 中使用 事件修饰符 ?

    Vue 中可以通过 v-on 来绑定事件监听函数, 不过事件会有许多额外情况, 比如 是否阻止冒泡 / 是否阻止重载 / 是否限制点击次数 / 是否可以通过按键触发 等等. 这时就需要使用到 事件修饰 ...

  2. 第二章 Vue快速入门--9 使用v-on指令定义Vue中的事件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  3. Vue_(基础)Vue中的事件

    Vue.js中文文档 传送门 Vue@事件绑定 v-show:通过切换元素的display CSS属性实现显示隐藏: v-if:根据表达式的真假实现显示隐藏,如果隐藏,它绑定的元素都会销毁,显示的时候 ...

  4. Vue中键盘事件

    Vue中监听 键盘事件及修饰符 键盘事件: keyCode 实际值 48到57     0 - 9 65到90           a - z ( A-Z ) 112到135       F1 - F ...

  5. vue中滚动事件绑定的函数无法调用问题

    问题描述: 一个包含下拉加载的页面,刷新当前页然后滚动页面,能够正常触发滚动事件并调用回调函数,但是如果是进了某一个页面然后再进的该页面,滚动事件能够触发, 但是回调函数在滚动的时候只能被调用一次. ...

  6. (二)咋使用VUE中的事件修饰符

    1,stop修饰符:阻止事件冒泡 首先我们要明确H5的事件是从内向外进行冒泡的,写一个简单的DEMO 当我们点击按钮时,事件从内向外冒泡,依次触发绑定的事件,控制台信息如下 现在我们在click后面添 ...

  7. vue中的事件监听之——v-on vs .$on

    跟着视频中老师的教学视频学vue的时候,看很多时候都用@(v-on)来监听子级emit的自定义事件,但在bus总线那块,又用.$on来监听bus自身emit的事件,v-on之间似乎相似但又不同,今天对 ...

  8. vue 中scroll事件不触发问题

    在vue项目中需要监听滚动条滚动的位置,结果写了scroll监听事件就是不生效,最后查资料发现是页面有样式设置了over-flow:scroll,去掉之后完美解决.(页面样式中存在over-flow: ...

  9. vue中的事件修饰符

    vue提倡的是在方法中只有对数据的处理,所以提供了事件修饰符用于DOM的事件处理,常用的事件修饰符有以下几个: (1). stop:阻止冒泡(通俗讲就是阻止事件向上级DOM元素传递) 点击内层div的 ...

随机推荐

  1. git-代码同步至github

    代码同步到github上 Last login: Wed Mar 27 13:53:06 on ttys001localhost:~ ligaijiang$ gitusage: git [--vers ...

  2. vue2.0--请求数据

    vue中用vue-reouse请求来的数据,会被封装一层,如下图res:

  3. [pat]1045 Favorite Color Stripe

    1.用一个数组里面存储喜爱数字的值来区分数字是不是喜爱,以及值的大小顺序,用vector循环删除a数组中不是喜爱的元素,这里it=erase()之后it自动指向下一个元素,由于循环每次还要自增1,所以 ...

  4. podofo 一点小分享

    PDF 的开源库,大多是Java,或C#的,但C++也有一个很不错的PDF开源库:PoDoFo 我司的PDF签章产品中,我就是用这个PoDoFo库来做的底层 但是国外开源库对中文支持都是或多或少有点问 ...

  5. Linux 安装Eclipse

    安装Eclipse 场景: 我用的是笔记本(Windows系统),我在笔记本上安装了虚拟机,在 虚拟机中安装了Linux系统,使用的镜像是:CentOS-6.6-x86_64-bin-DVD1.iso ...

  6. Bukkit插件编程之检测玩家受到的伤害是来自投射类武器还是近身武器

    package com.sklm.lhb.listener; import org.bukkit.entity.Arrow; import org.bukkit.entity.Player; impo ...

  7. 有关Struts下载文件时报错问题

    在学习文件下载的时候,我也是按照网络课程上面老师的代码一句一句敲得,和老师的一模一样:到最后测试下载的时候出现了如下的错误: 而老师的写的代码可以完美运行,以下是跟着老师敲的代码: package c ...

  8. Python记录1:基础知识常识

    今日内容: 一,Python的数据类型 Python一共有以下几种常见的数据类型:int(整形)  float(浮点型)  str(字符串)  list(列表)   tuple元组  dict(字典) ...

  9. MindMaster学习笔记

    参考博客 http://blog.sina.com.cn/u/6406591976 作者名叫“MindMaster思维导图的博客 ”写了一系列关于思维导图的博客,可以去学习下. 1.其中有一篇比较详细 ...

  10. html5-列表

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...