专栏首页eadelavuejs基础-事件修饰符

vuejs基础-事件修饰符

stop阻止冒泡

prevent阻止默认事件

capture添加事件侦听器时使用时间捕获模式

self只当事件在元素本身触发时回调

once事件只出发一次

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="vue.min.js" ></script>
		<style>
			.inner{
				height: 150px;
				width: 500px;
				background-color: darkcyan;
			}
			.outter{
				height: 200px;
				width: 550px;
				background-color: darkblue;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!--<div class="inner" @click="divclick">
				<input type="button" value="戳他" @click.stop="btnclick"/>
			</div>-->
			
			<!--<a href="http://www.baidu.com" @click.prevent="aclick">这是百度链接</a>-->
			<!--<div class="inner" @click.self="divclick">
				<input type="button" value="戳他" @click="btnclick"/>
			</div>-->
			
			<!--<div class="inner" @click.capture="divclick">
				<input type="button" value="戳他" @click="btnclick"/>
			</div>-->
			
			<!--<a href="http://www.baidu.com" @click.prevent.once="aclick">这是百度链接</a>-->
			<div class="outter" @click="outter">
				<div class="inner" @click.self="divclick">
					<input type="button" value="戳他" @click="btnclick"/>
				</div>
			</div>
			<div class="outter" @click="outter">
				<div class="inner" @click="divclick">
					<input type="button" value="戳他" @click.stop="btnclick"/>
				</div>
			</div>
			
		</div>
	</body>
	
	<script>
		new Vue({
			el:"#app",
			data:{},
			methods:{
				divclick(){
					console.log("这是div点击事件");
				},
				btnclick(){
					console.log("这是button点击事件");
				},
				aclick(){
					console.log("这是a标签点击事件!")
				},
				outter(){
					console.log("这是外层div点击事件!")
				}
			}
		});
	</script>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • HTML5--浏览器全屏操作、退出全屏、是否全屏

    eadela
  • jQuery基础--创建节点和 添加节点

    eadela
  • jQuery基础--jQuery特殊属性操作

    区别:html方法会识别html标签,text方法会那内容直接当成字符串,并不会识别html标签。

    eadela
  • python flask 的分页使用

    flask-sqlalchemy 的分页参考文档 http://www.pythondoc.com/flask-sqlalchemy/api.html#id1

    py3study
  • Web-第五天 BootStrap学习

    将使用Bootstrap重写首页,整个案例中将使用到Bootstrap各种模块,为了方便编程,将采用拆分的原则,各个模块单独编写,最后组合。

    Java帮帮
  • Windows下编译ffmpeg

    在Linux/Mac下编译 ffmpeg是非常方便的。但要在 Windows下编译 ffmpeg还真要花点时间。不过为了满足学员的要求,也方便自己不再被这类问题...

    音视频_李超
  • 前台分页,以及类别选择

    效果: ? 前台分页 区别于后台分页的将第几页和共多少条传到后台,再从后台从数据库查询出当前页应该显示的数据返回 前台分页是将所有的数据都查出存到前台,在经过用...

    二十三年蝉
  • 用Vue.js开发一个电影App的前端界面

    我们大多数人使用在线流媒体服务(如Netflix)观看我们最喜欢的电影或者节目。这篇文章将重点介绍如何通过使用vue.js 2 建立一个类似风格的电影流媒体WE...

    笔阁
  • 如何打印GC日志排查问题

    这种时候,有经验的工程师应该能马上怀疑是GC的问题,我们可以通过在运行时添加JVM参数来打印程序运行时的GC情况。

    用户7634691
  • vue v-link

    <div id="app"> <nav class="navbar navbar-inverse"> <div class="container"> <d...

    用户5760343

扫码关注云+社区

领取腾讯云代金券