Vue之阻止默认行为
1.使用原生js实现点击右键阻止默认行为
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{ },
methods:{
show:function(ev){
alert(1);
ev.preventDefault();
}
}
});
};
</script>
</head>
<body>
<div id="box">
<input type="button" value="按钮" @contextmenu="show($event)">
</div>
</body>
</html>
描述：
使用原生js中的ev.preventDefault() 阻止默认行为
2.Vue中使用 .prevent 阻止默认行为
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{ },
methods:{
show:function(){
alert(1);
}
}
});
};
</script>
</head>
<body>
<div id="box">
<input type="button" value="按钮" @contextmenu.prevent="show()">
</div>
</body>
</html>
Vue之阻止默认行为的更多相关文章
- vue.js阻止事件冒泡和默认事件
首先我们来看原生JS取消事件冒泡方法: e.stopPropagation(); //非IE浏览器window.event.cancelBubble = true; //IE浏览器 原生JS阻止默认事 ...
- vue 事件上加阻止冒泡 阻止默认事件
重点 vue事件修饰符 <!-- 阻止单击事件冒泡 --> <a v-on:click.stop="doThis"></a> <!-- 提 ...
- vue 事件修饰符（阻止默认行为和事件冒泡）
1. 原生js中,阻止事件冒泡,获取点击对象, e.stopPropagation(); 2. vue阻止事件冒泡@click.stop="show" <body> & ...
- Vue 事件修饰符 阻止默认事件
阻止默认事件: <a v-on:click.prevent="doThat"></a>
- 阻止默认事件event.preventDefault();
阻止浏览器默认事件.什么是默认事件,例如浏览器默认右键菜单.a标签默认连接跳转...,如何阻止呢? Firefox中,event必须作为参数传入. IE中,event是window对象的属性. ev ...
- 阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return fal的区别
今天来看看前端的冒泡和事件默认事件如何处理 1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时 ...
- s事件之event.preventDefault()与event.stopPropagation()的阻止默认事件和阻止事件冒泡的用法
event.preventDefault()用法介绍 该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作).例如,如果 type 属性是 "submit" ...
- jQuery阻止默认行为和阻止冒泡
1.阻止默认行为:通常是值一个标签的默认行为,如button的提交表单,a标签的跳转等. 那如何阻止标签的默认行为? 1)return false 2) e.preventDefault(); < ...
- 锋利的jQuery-4--阻止事件冒泡和阻止默认行为
阻止事件冒泡: 如果嵌套元素分别有自己的click事件,当点击内层元素时外层元素的事件也会被触发. $("span").bind("click", functi ...
- js之阻止事件冒泡(待修改)和阻止默认事件
阻止默认事件(event.stopPropagation()): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...
随机推荐
- 从数据库中读取数据并写入到Excle电子表格之2
//CC_AutoId, CC_LoginId, CC_LoginPassword, CC_UserName, CC_ErrorTimes, CC_LockDateTime, CC_TestInt ...
- 落地微服务架构v2.0
网关+服务治理 将服务注册到Consul中,需要首先系统该插件. Ocelot:网关组件,腾讯和微软都在使用. 可以使用dotnet run命令启动.NET Core项目,启动时可以在命令时传递监听的 ...
- 【小小Demo】微信公众号如何接入微信机器人
微信对话开放平台文档 官方文档 平台简介 微信对话开放平台开放了微信在对话领域积累多年的的智能对话技术,开发者及非开发者可简单.快速地搭建智能对话机器人(智能客服), 并接入公众号.小程序等,为业务赋 ...
- Maven配置UTF8，JDK版本
<!-- 局部jdk配置,pom.xml中 --> <build> <plugins> <plugin> <groupId>org.apac ...
- 用windows脚本命令netsh快速启用、禁用网络
用windows脚本命令netsh快速启用.禁用网络 不知道你有没有这种需求:公司单位里的网络是内网,有时需要连接手机热点wifi网络,这时就需要先禁用内网网卡,启用无线网卡.连接内网的时候又需要先禁 ...
- 解密Prompt系列12. LLM Agent零微调范式 ReAct & Self Ask
前三章我们分别介绍了思维链的使用,原理和在小模型上的使用.这一章我们正式进入应用层面,聊聊如何把思维链和工具使用结合得到人工智能代理. 要回答我们为什么需要AI代理?代理可以解决哪些问题?可以有以下两 ...
- Python生成30万条Excel 测试数据
使用Python生成30万条Excel 测试数据 from openpyxl import Workbook from concurrent.futures import ThreadPoolExec ...
- 【日常踩坑】修复 chrome 打不开微信或者部分第三方应用内链接
目录 默认浏览器为 chrome 时,打不开微信或者部分第三方应用内链接(或者没有反应) 修复问题:卸载 KGChromePlugin 参考资料 默认浏览器为 chrome 时,打不开微信或者部分第三 ...
- vscode 中 Markdown 粘贴图片的位置
背景 自从 typora 开始收费后, 不少人开始寻找其他的 Markdown编辑器, 我觉得 vscode 就是一个很不错的选择 虽然不能像 typora 在Markdown预览中编辑, 但是左右布 ...
- nmcli 命令设置网络
nmcli 命令设置网络 设置静态 IP 地址 sudo nmcli connection modify "连接名称" ipv4.addresses IP地址/子网掩码 设置网关 ...