how2j.cn

步骤 1 : v-on 监听事件   
步骤 2 : v-on 缩写为 @   
步骤 3 : 事件修饰符   
步骤 4 : 冒泡这件事   
步骤 5 : 事件修饰符 阻止冒泡 .stop   
步骤 6 : 事件修饰符 优先触发 .capture   
步骤 7 : 事件修饰符 只有自己能触发,子元素无法触发.self   
步骤 8 : 事件修饰符 只能提交一次 .once   
步骤 9 : 事件修饰符 阻止提交 .prevent   

步骤 1 :

v-on 监听事件

1. 在 js里为 Vue 对象的数据设置为 clickNumber

data: {
clickNumber:0
}

2. 新建一个方法: count, 其作用是 clickNumber 自增1

methods:{
count: function(){
this.clickNumber++;
}
}

3. 在按钮上增加 click 监听,调用 count 方法

<button v-on:click="count">点击</button>
运行效果
<script src="http://how2j.cn/study/vue.min.js"></script> <div id="div1"> <div>一共点击了 {{clickNumber}}次</div> <button v-on:click="count">点击</button> </div> <script> new Vue({ el: '#div1', data: { clickNumber:0 }, methods:{ count: function(){ this.clickNumber++; } } }) </script>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
步骤 2 :

v-on 缩写为 @

v-on 还可以缩写为 @
原来写法:

<button v-on:click="count">点击</button>

缩写之后:

<button @click="count">点击</button>
运行效果
<script src="http://how2j.cn/study/vue.min.js"></script> <div id="div1"> <div>一共点击了 {{clickNumber}}次</div> <button @click="count">点击</button> </div> <script> new Vue({ el: '#div1', data: { clickNumber:0 }, methods:{ count: function(){ this.clickNumber++; } } }) </script>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
步骤 3 :

事件修饰符

vue.js 还提供了各种事件修饰符来方便开发者使用。

.stop
.prevent
.capture
.self
.once

这些都是什么用呢? 接下来就会一一展开
步骤 4 :

冒泡这件事

事件修饰符 里面有几个都是关于冒泡的,那么什么是冒泡呢? 简单的说就是 父元素里有 子元素, 如果点击了 子元素, 那么click 事件不仅会发生在子元素上,也会发生在其父元素上,依次不停地向父元素冒泡,直到document元素。

尝试点击下面的任意一个 div,就会观察到冒泡现象
运行效果
<script src="http://how2j.cn/study/vue.min.js"></script> <style type="text/css"> * { margin: 0 auto; text-align:center; line-height: 40px; } div { width: 100px; cursor:pointer; } #grandFather { background: green; } #father { background: blue; } #me { background: red; }#son { background: gray; } </style> <div id="content"> <div id="grandFather" v-on:click="doc"> grandFather <div id="father" v-on:click="doc"> father <div id="me" v-on:click="doc"> me <div id="son" v-on:click="doc"> son </div> </div> </div> </div> </div> <script> var content = new Vue({ el: "#content", data: { id: '' }, methods: { doc: function () { this.id= event.currentTarget.id; alert(this.id) } } }) </script>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
步骤 5 :

事件修饰符 阻止冒泡 .stop

在me上的click后面加一个 .stop, 那么冒泡到了这里就结束了,就不会冒到father上面去了。
<div id="me" v-on:click.stop="doc">
运行效果
<script src="http://how2j.cn/study/vue.min.js"></script> <style type="text/css"> * { margin: 0 auto; text-align:center; line-height: 40px; } div { width: 100px; cursor:pointer; } #grandFather { background: deeppink; } #father { background: pink; } #me { background: hotpink; }#son { background: #ff4225; } </style> <div id="content"> <div id="grandFather" v-on:click="doc"> grandFather <div id="father" v-on:click="doc"> father <div id="me" v-on:click.stop="doc"> me <div id="son" v-on:click="doc"> son </div> </div> </div> </div> </div> <script> var content = new Vue({ el: "#content", data: { id: '' }, methods: { doc: function () { this.id= event.currentTarget.id; alert(this.id) } } }) </script>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
步骤 6 :

事件修饰符 优先触发 .capture

在father 上增加一个.capture
<div id="father" v-on:click.capture="doc">
那么当冒泡发生的时候,就会优先让father捕捉事件。
点击son或者me的时候,都会优先触发它
运行效果
<script src="http://how2j.cn/study/vue.min.js"></script> <style type="text/css"> * { margin: 0 auto; text-align:center; line-height: 40px; } div { width: 100px; cursor:pointer; } #grandFather { background: deeppink; } #father { background: pink; } #me { background: hotpink; }#son { background: #ff4225; } </style> <div id="content"> <div id="grandFather" v-on:click="doc"> grandFather <div id="father" v-on:click.capture="doc"> father <div id="me" v-on:click="doc"> me <div id="son" v-on:click="doc"> son </div> </div> </div> </div> </div> <script> var content = new Vue({ el: "#content", data: { id: '' }, methods: { doc: function () { this.id= event.currentTarget.id; alert(this.id) } } }) </script>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
步骤 7 :

事件修饰符 只有自己能触发,子元素无法触发.self

修改father,增加 .self
<div id="father" v-on:click.self="doc">
这样点击son 和 me都不会导致其触发click事件,只有点击father自己,才会导致事件发生。
运行效果
<script src="http://how2j.cn/study/vue.min.js"></script> <style type="text/css"> * { margin: 0 auto; text-align:center; line-height: 40px; } div { width: 100px; cursor:pointer; } #grandFather { background: deeppink; } #father { background: pink; } #me { background: hotpink; }#son { background: #ff4225; } </style> <div id="content"> <div id="grandFather" v-on:click="doc"> grandFather <div id="father" v-on:click.self="doc"> father <div id="me" v-on:click="doc"> me <div id="son" v-on:click="doc"> son </div> </div> </div> </div> </div> <script> var content = new Vue({ el: "#content", data: { id: '' }, methods: { doc: function () { this.id= event.currentTarget.id; alert(this.id) } } }) </script>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
步骤 8 :

事件修饰符 只能提交一次 .once

修改father,增加 .once
<div id="father" v-on:click.once="doc">
这样father点击一次之后,就不会再监听到click了,但是有意思的是,grandFather还能监听到~
运行效果
<script src="http://how2j.cn/study/vue.min.js"></script> <style type="text/css"> * { margin: 0 auto; text-align:center; line-height: 40px; } div { width: 100px; cursor:pointer; } #grandFather { background: deeppink; } #father { background: pink; } #me { background: hotpink; }#son { background: #ff4225; } </style> <div id="content"> <div id="grandFather" v-on:click="doc"> grandFather <div id="father" v-on:click.once="doc"> father <div id="me" v-on:click="doc"> me <div id="son" v-on:click="doc"> son </div> </div> </div> </div> </div> <script> var content = new Vue({ el: "#content", data: { id: '' }, methods: { doc: function () { this.id= event.currentTarget.id; alert(this.id) } } }) </script>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
步骤 9 :

事件修饰符 阻止提交 .prevent

通过在 click 后面添加 .prevent 可以阻止页面刷新。

@click.prevent="jump"

也可以直接用@click.prevent后面不跟函数

@click.prevent


注: 只有超链和form这种会导致页面刷新的操作,.prevent 才有用。 普通的不导致页面刷新的按钮,加上这个没有任何变化。
注: 跳转到 12306.com 后,用 F5 刷新页面返回。。。
运行效果
<script src="http://how2j.cn/study/vue.min.js"></script> <div id="div1"> <a href="http://12306.com" @click="jump" >正常的链接 http://12306.com</a> <br> <a href="http://12306.com" @click.prevent="jump" >prevent jump()之后的链接 http://12306.com</a> <br> <a href="http://12306.com" @click.prevent >纯prevent之后的链接 http://12306.com</a> <br> <br> <form @submit="jump" action="http://12306.com"> <button type="submit">正常的form</button> </form> <form @submit.prevent="jump" action="http://12306.com"> <button type="submit">prevent jump()之后的form</button> </form> <form @submit.prevent action="http://12306.com"> <button type="submit">纯prevent之后的form</button> </form> </div> <script> new Vue({ el: '#div1', data: { }, methods:{ jump:function(){ alert("jump()函数被调用"); } } }) </script>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果


HOW2J公众号,关注后实时获知布最新的教程和优惠活动,谢谢。


问答区域    
2018-09-06 我这个点击了子元素还是可以弹出来的啊
袅残烟
我这个点击了子元素还是可以弹出来的啊








答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到




2018-07-29 Firefox事件冒泡无效
元无心



使用Chrome可以出现冒泡效果,但Firefox点击后没有反应。使用的就是示例代码。

							

							


1 个答案

漫漫漫漫动作 答案时间:2018-08-02
Firefox的event不是这样直接用的,百度查一下会有很多答案的




答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到









提问之前请登陆
关于 前端部分-Vue.js-监听事件 的提问

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 902680467
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
在已经存在的几千个提问里,有相当大的比例,是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本,可以节约自己大量的学习时间。 站长把教学中用的软件版本整理了,都统一放在了这里, 方便大家下载: http://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图