vue监听用户点击区域

<template><div><div><h3>事件</h3><div><!-- 有括号,有参数打印参数 --><button @click="clickcount(0)">小区域0</button><!-- 没有括号弹出事件对象 --><button @click="clickcount1">小区域1</button><!-- 两个参数 --><button @click="clickcount2('something1', $event)">小区域2</button></div></div><div><h3>事件修饰符号</h3><a href="http://www.luichun.cn">单纯连接</a><br /><!-- 完成Aclick事件后再进行跳转 --><a href="http://www.luichun.cn" @click="Aclick">完成Aclick事件后再进行跳转</a><br /><!-- 点击后不会再进行跳转 --><a href="http://www.luichun.cn" @click.prevent="Aclick">点击后不会再进行跳转</a></div><div><h3>冒泡事件</h3></div><div><h3>div里面没有事件,点击只会触发按钮里面的点击事件</h3><div style="width: 150px; height: 100px; background-color: blue"><button @click="clickcount(0)">按钮</button></div><h3>内部的按钮,点击了之后会点击两个区域</h3><divstyle="width: 150px; height: 100px; background-color: blue"@click="clickcount1(1)"><button @click="clickcount(0)">按钮</button></div><h3>阻止冒泡事件,只是执行按钮的事件</h3><divstyle="width: 150px; height: 100px; background-color: blue"@click="clickcount1(1)"><button @click.stop="clickcount(0)">按钮</button></div><div><h3>监听回车</h3><input type="text" @keyup.enter="enterkey" /></div><div><h3>监听输入</h3><input type="text" @keyup="enterkey1" /></div></div></div>
</template><script>
export default {name: "TestEvent",methods: {clickcount(something) {console.log(something);},clickcount1(something) {console.log(something);},clickcount2(something, event) {console.log(something);console.log(event);},Aclick() {alert(0);},enterkey(event) {console.log(event["keyCode"]);},enterkey1() {alert("输入了");},},
};
</script><style>
</style>

vue监听用户点击区域相关推荐

vue监听用户在页面的浏览时间需在beforeDestroy()里面进行销毁
无论把这些钩子放到哪个位置,都是按顺序执行 <template><div class="all"><div class="one" ...
Vue监听滚动条事件点击回到顶部
Vue监听滚动条事件点击回到顶部监听滚顶条事件: created () {this.listenerFunction(); }, beforeDestroy () {document.remove ...
Vue跨路由触发事件，Vue监听sessionStorage
近来,在做公司的聊天系统,引用的是极光的api.项目需求实时监听别人发过来的消息,进行渲染到页面,还有历史记录也要渲染,历史记录和实时聊天记录返回的结构体还不一样,看到需求的我欲哭无泪,首先登录是在首 ...
vue 监听页面滚动事件：触发animate.min.css动画特效
一.问题答疑: 1. animate.css 如何在vue项目中引入?或引用? 2. 如何监听滚动事件,触发animate.class动画播放? vue 监听滚轮滚动事件,for循环 ,动态id,代码 ...
微信被指监听用户，腾讯回应；谷歌意外推送 Android 11 Beta 更新；Linux 5.7 发布 | 极客头条...
整理 | 屠敏头图 | CSDN 下载自视觉中国快来收听极客头条音频版吧,智能播报由出门问问「魔音工坊」提供技术支持. 「极客头条」-- 技术人员的新闻圈! CSDN 的读者朋友们早上好哇,「极客 ...
vue监听浏览器刷新和关闭事件，并在页面关闭/刷新前发送请求
vue监听浏览器刷新和关闭事件,并在页面关闭/刷新前发送请求 1.需求背景: 2.需求分析: 3.实现方式: 4.实现方式解析: 1)浏览器页面事件基础 2)在mounted监听beforeunloa ...
maptalks常见操作——图层置顶置底、添加清空图层、添加标注、切换底图、添加缩放工具、事件监听（点击面出弹框）、右键菜单、绘制mark、锁定视角
maptalks常见操作--图层置顶置底.添加清空图层.添加标注.切换底图.添加缩放工具.事件监听(点击面出弹框).右键菜单.绘制mark.锁定视角 1.图层置顶置底 layer.show().br ...
vue监听滚动事件实现某元素吸顶或者固定位置显示
vue监听滚动事件实现某元素吸顶或者固定位置显示最近写了一个VUE的web app项目,需要实现某个部位吸顶的效果.即,页面往上滑动,刚好到达该部位时,该部分,固定在顶部显示. 1.监听滚动事件 ...
vue监听物理返回键事件
在一些项目支付页中,有些用户因价格不太满意等导致成交失败,点击返回键退出页面,这个时候可以通过监听用户返回动作来触发某些事件,比如弹出红包优惠等等. // 判断设备是否支持 mounted() {if ...

vue监听用户点击区域

vue监听用户点击区域相关推荐

最新文章

热门文章