Vue之@click、事件修饰符@click.stop与@click.prevent、按键修饰符@keyup.enter
1、绑定监听@click:
(以监听click为例,其他如keyup,用法类似) v-on:click="fun"
@click="fun"
@click="fun(参数)"
<button @click="test1">test1</button>
<button @click="test2('abc')">test2</button>
<button @click="test3('abcd', $event)">test3</button> methods: {
test1(eve) {//test1函数没有参数,默认传递 $event
alert(eve.target.innerHTML) //test1
},
test2 (msg) { //test1函数有参数,传递该参数
alert(msg) // abc
},
test3 (msg, event) { //有参数,如果想获取到enevt,则函数中需要写 $event
alert(msg+'---'+event.target.textContent) // abcd---test3
}
}
2、@click.stop与@click.prevent
@click.stop 阻止事件冒泡
<div id="app">
<div v-on:click="dodo">
<button v-on:click="doThis">阻止单击事件继续传播</button>
</div>
</div> <script>
var app = new Vue({
el: "#app",
data: {
name: "Vue.js"
},
methods: {
doThis: function () {
alert("noclick");
},
dodo: function () {
alert("dodo");
}
}
});
</script>
//将会先弹出“noclick”,再弹出“dodo”。
<div id="app">
<div v-on:click="dodo">
<button v-on:click.stop="doThis">阻止单击事件继续传播</button>
</div>
</div> <script>
var app = new Vue({
el: "#app",
data: {
name: "Vue.js"
},
methods: {
doThis: function () {
alert("noclick");
},
dodo: function () {
alert("dodo");
}
}
});
</script>
//只弹出“noclick”
@click.prevent 阻止事件的默认行为,
<a href="http://www.baidu.com" @click.prevent="test4">百度一下</a> //阻止a标签跳转,仅执行函数test4 <form action="/xxx" @submit.prevent="test5"> //阻止表单提交,仅执行函数test5 <input type="submit" value="注册">
</form>
3、按键修饰符
@keyup.enter
//按下enter时,执行方法test7 <input type="text" @keyup.enter="test7"> methods: { test7 (event) {
console.log(event.keyCode)
alert(event.target.value)
} }
Vue之@click、事件修饰符@click.stop与@click.prevent、按键修饰符@keyup.enter的更多相关文章
- 如何用按钮的click事件去触发a标签的click事件
在jQquery中,可以用如下方式触发input.a标签的click事件: <input id="my_input" /> <a id="my_a&qu ...
- VUE3 之 click 事件
1. 概述 老话说的好:努力帮别人解决难题,你的难题也就不难解决了. 言归正传,今天我们来聊聊 VUE3 的 click 事件的相关知识. 2. click 事件 2.1 实现数字递减 <bod ...
- 移动端的传统click事件延迟和点透现象
一.场景描述: 1.A/B两个层上下z轴重叠. 2.上层的A点击后消失或移开.(这一点很重要) 3.B元素本身有默认click事件(如a标签) 或 B绑定了click事件. 在以上情况下,点击A/B重 ...
- 解决jQuery中dbclick事件触发两次click事件
首先感谢这位小哥!http://qubernet.blog.163.com/blog/static/1779472842011101505853216/ 太长姿势了. 在jQuery事件绑定中,dbc ...
- 如何模拟click事件,打开一个a标签链接?
在项目开发过程中,我们经常会碰到通过接口返回一个地址,同时在新的tab页面打开一个网址的情况,最直观的想法就是通过window.open(url)的方式,打开一个新的页面,但是大部分浏览器会遭遇拦截. ...
- jQuery中click事件多次触发解决方案
jQuery 中元素的click事件中绑定其他元素的click事件. 因为jQuery中的click事件会累计绑定,导致事件注册越来越多. 解决方案: 1.能够避开,避免把click事件绑定到其他元素 ...
- click事件多次触发 jQuery
jQuery 中 click事件会累计绑定 例如下列代码: aNode.click(function(){ bNode.click(function(){ console.log('haha'); } ...
- 移动端开发用touch事件还是click事件
前端开发现在包含了跨浏览器,跨平台(不同操作系统)和跨设备(不同尺寸的设备)开发. 在移动开发的过程中,到底选取touch事件还是click事件?对了,请不要鄙视click,click在移动端开发用着 ...
- 移动端的touch click事件的理解+点透
移动端在touch上一共有4个事件 touchstart touchmove touchend touchcancel, touchcancel, 一般来说,它们执行的顺序为 touchstart - ...
- Vue_(基础)Vue中的事件
Vue.js中文文档 传送门 Vue@事件绑定 v-show:通过切换元素的display CSS属性实现显示隐藏: v-if:根据表达式的真假实现显示隐藏,如果隐藏,它绑定的元素都会销毁,显示的时候 ...
随机推荐
- 使用JMeter进行Apache Kafka负载测试
1.卡夫卡负载测试 在这个Apache Kafka教程中,我们将了解如何使用Apache JMeter,如何在Apache Kafka上执行Kafka负载测试.此外,这个Kafka负载测试教程教我们如 ...
- springmvc的注解配置
springmvc大大减少了对xml的配置,减少了配置量,以及可以在一个controller类中进行多个请求配置 一.springmvc配置 context:component-scan 开启包扫描, ...
- centos7安装php7.3
安装php7.3 CentOS/RHEL 7.x: yum install epel-release yum install http://rpms.remirepo.net/enterprise/r ...
- jquery 根据后台传递过来的三维数组动态生成三级菜单
根据后台传递过来的三维数组动态生成三级菜单 <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- Spring MVC前端控制器不拦截静态资源配置
- [国家集训队] JZPKIL
题目链接 洛谷:https://www.luogu.org/problemnew/show/P4464 Solution 这题是真的毒....数论大杂烩,窝断断续续写了两天. 众所周知: \[ {\r ...
- [高清] Java从入门到精通第3版
------ 郑重声明 --------- 资源来自网络,纯粹共享交流, 如果喜欢,请您务必支持正版!! --------------------------------------------- 下 ...
- PowerShell命令批量添加、导出AD用户
导入单个AD用户命令 New-ADUser -Name "周八" -Surname "周" -GivenName "八"-SamAccoun ...
- ChipGenius 识别U盘主控信息
ChipGenius 识别U盘主控信息 ================== End
- vue 关于子组件向父组件传值$emit触发无效问题
先贴上代码 子组件代码 //子组件请求接口,用自己封装的axios getupdate(){ this.$post({ url:this.$apis.unitupdate, postType:'jso ...