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// ...
随机推荐
- 【技术积累】HTML+CSS+JavaScript中的基础知识【一】
HTML基础标签 <html> 定义HTML文档的根元素. <!DOCTYPE html> <html> <head> <title>My ...
- 给C#新增一个时间类型: YearMonth
在.Net Framework中,我们常用的时间类型是DateTime.直到.Net6微软加入了两个新的时间类型:DateOnly和TimeOnly,才弥补了之前的不足. DateOnly:表示仅日期 ...
- 最全面的JAVA多线程知识总结
背景: 2023年经营惨淡,经历了裁员就业跳槽再就业,在找工作过程中对于知识的梳理和总结,本文总结JAVA多线程. 应用场景: 需要同时执行多个任务或处理大量并发请求时, 目前常用的场景有: We ...
- 自用gulp打包脚本，压缩html，压缩js，压缩css，压缩图片，功能齐全
const gulp = require('gulp'); const fs = require('fs'); const htmlmin = require('gulp-htmlmin'); con ...
- #Powerbi 1分钟学会，设置有密码保护的powerbi报告
目前,有一些朋友和笔者一样,公司暂时没有部署powerbi服务器,但是有时也需要使用powerbi共享一些看板. 如果直接将制作好的报告直接发布在公网上,又存在一定的风险,即便可能只是公布1天. 那么 ...
- 使用MediatR和FluentValidation实现CQRS应用程序的数据验证
本文将重点介绍如何通过MediatR的管道功能将FluentValidation集成到项目中实现验证功能. 什么是CQRS? CQRS(Command Query Responsibility Seg ...
- Python Web：Django、Flask和FastAPI框架对比
Django.Flask和FastAPI是Python Web框架中的三个主要代表.这些框架都有着各自的优点和缺点,适合不同类型和规模的应用程序. Django: Django是一个全功能的Web框架 ...
- Jmeter逻辑控制器Switch Controller的用法
一.概述 类似编程语言中的switch函数,Switch Controller根据给定的值n(可使用变量)选择执行其下的 第n+1个子节点. 作用:Switch Controller通过给该控制器中的 ...
- KRPANO资源分析工具下载网展全景图
示:目前分析工具中的全景图下载功能将被极速全景图下载大师替代,相比分析工具,极速全景图下载大师支持更多的网站(包括各类KRPano全景网站,和百度街景) 详细可以查看如下的链接: 极速全景图下载大师官 ...
- Shell脚本中文英文多语言国际化和命令行批处理(bash sh cmd bat)中定义函数的简单写法
目录 命令行脚本参考 - bat 命令行脚本参考 - bash 值得学习的知识点 1. 识别终端使用的语言 2. 函数的编写 3. 获取用户的输入 4. bat文件老是乱码怎么办 有时候为了方便别人使 ...