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// ...
随机推荐
- 前端学习 C 语言 —— GDB调试器
GDB调试器 我们在讲指针时用 GDB 调试段错误. 本篇将详细介绍 gdb 的最常用命令.日志记录.检测点,最后介绍如何用 gdb 调试进程以及用gdb 调试一个开源项目的调试版本 -- glmar ...
- ASP.Net Core 项目部署
安装环境 部署环境有两种: .Net Core SDK 包含所有运行时和程序开发包,用于程序开发使用,体积相对较大. .Net Core Runtime 仅用于程序运行,不包含开发包,体积小. 注:部 ...
- iOS Block笔记总结
前言: 对block的简单笔记总结, 1.本质: 封装了函数调用和函数调用环境的对象 2.block结构: 3.block捕获变量: 由于需要跨函数访问变量,所以需要捕获变量,(防止访问时已被销毁) ...
- iOS 循环引用的问题总结
原因: self -> Timer -> target(self), 造成循环引用 导致控制器不会销毁,不会调用dealloc 方法,内存泄漏 - (void)dealloc{ [_tim ...
- MyBatis理论
MyBatis简介 MyBatis是什么? MyBatis是一款优秀的持久层框架,一个ORM(对象关系映射)框架,它支持定制化SQL.存储过程以及高级映射.MyBaits避免了几乎所有JDBC代码和手 ...
- 记一次 .NET 某物流API系统 CPU爆高分析
一:背景 1. 讲故事 前段时间有位朋友找到我,说他程序CPU直接被打满了,让我帮忙看下怎么回事,截图如下: 看了下是两个相同的程序,既然被打满了那就抓一个 dump 看看到底咋回事. 二:为什么会打 ...
- [golang]字符串拼接
前言 在go语言中,因为字符串只能被访问,不能被修改,所以进行字符串拼接的时候,golang都需要进行内存拷贝,造成一定的性能消耗. 方式1:操作符 + 特点:简单,可读性良好.每次拼接都会产生内存拷 ...
- 从浅入深了解.NET Core MVC 2.x全面教程【第二章】
二.Logging 1.诊断中间件 命名空间:Microsoft.AspNetCore.Diagnostics 报告信息并处理异常 2.诊断中间件 UseDeveloperExceptionPage: ...
- 基于C#的消息处理的应用程序 - 开源研究系列文章
今天讲讲基于C#里的基于消息处理的应用程序的一个例子. 我们知道,Windows操作系统的程序是基于消息处理的.也就是说,程序接收到消息代码定义,然后根据消息代码定义去处理对应的操作.前面有一个博文例 ...
- c# .NET 高级编程 高并发必备技巧(二) - 分布式锁
上一篇文章简单的介绍了单机的情况下如何进行加锁,防止高并发带来的问题. 然而现实中,一般会高并发的应用,很少会单机部署.当用户量达到一定的程度,分布式.集群部署是必然的选择.在分布式部署的情况下,之前 ...