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// ...
随机推荐
- 关于 axios 是什么？以及怎么用？
〇.前言 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 Node.js 中.简单的讲就是可以发送 Get.Post 请求. 诸如 Vue.React.Angular 等前 ...
- 微信小程序生态15- 批量提交微信小程序审核的一种方式
大家好!我是sum墨,一个一线的底层码农,平时喜欢研究和思考一些技术相关的问题并整理成文,限于本人水平,如果文章和代码有表述不当之处,还请不吝赐教. 以下是『微信小程序生态系列文章』正文! 需求背景 ...
- CVPR 2023 | RCF：完全无监督的视频物体分割
TLDR: 视频分割一直是重标注的一个task,这篇CVPR 2023文章研究了完全不需要标注的视频物体分割.仅使用ResNet,RCF模型在DAVIS16/STv2/FBMS59上提升了7/9/5% ...
- CobaltStrike4.8--云服务器搭建
系统版本选用 选择最熟悉的版本,我这边用的CentOS7.8,选用乌班图的话,会有一些命令的不一致 配置运行环境 CobaltStrike4.0支持jdk1.8的环境,4.5开始就不支持1.8了,本文 ...
- zabbix 主动模式下报文分析
获取监控项列表 客户端发起请求 3次握手之后,请求监控项列表: {"request":"active checks","host":&quo ...
- FPGA移位加三法
介绍 BCD码 BCD码的英文全称是Binary-Coded Decimal,简称BCD,按字面解释是二进制十进制代码,是一种二进制的数字编码形式. 常见的BCD码有8421BCD码,2421BCD ...
- 使用supervisor守护Prometheus进程
使用supervisor守护Prometheus进程 目录 使用supervisor守护Prometheus进程 安装supervisor 安装Prometheus监控系统 配置supervisor ...
- Trino418版本动态加载catalog不需要重启集群修改思路及实现
熟悉Trino 的同学应该都知道Trino新增.删除 catalog 都需要重启集群,这个生产环境里如果需要频繁增加数据源的场景是非常不友好的操作. 网上关于动态加载Catalog ...
- QA|外部调用类方法总报错missing 1 required positional argument:'self'|UI自动化
外部调用类方法总报错missing 1 required positional argument:'self' 原因:实例化这个类 实例化错了,少了括号() 解决:改成如下就可以了 参考学习:调用类方 ...
- git status详解
git status详解 在使用Git进行版本控制时,git status是一个非常有用的命令,用于查看当前代码仓库的状态.它可以告诉你哪些文件已更改.添加或删除,以及是否有未提交的更改等.本篇博客文 ...