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之阻止默认行为的更多相关文章

  1. vue.js阻止事件冒泡和默认事件

    首先我们来看原生JS取消事件冒泡方法: e.stopPropagation(); //非IE浏览器window.event.cancelBubble = true; //IE浏览器 原生JS阻止默认事 ...

  2. vue 事件上加阻止冒泡 阻止默认事件

    重点 vue事件修饰符 <!-- 阻止单击事件冒泡 --> <a v-on:click.stop="doThis"></a> <!-- 提 ...

  3. vue 事件修饰符（阻止默认行为和事件冒泡）

    1. 原生js中,阻止事件冒泡,获取点击对象, e.stopPropagation(); 2. vue阻止事件冒泡@click.stop="show" <body> & ...

  4. Vue 事件修饰符 阻止默认事件

    阻止默认事件: <a v-on:click.prevent="doThat"></a>

  5. 阻止默认事件event.preventDefault();

    阻止浏览器默认事件.什么是默认事件,例如浏览器默认右键菜单.a标签默认连接跳转...,如何阻止呢? Firefox中,event必须作为参数传入.  IE中,event是window对象的属性. ev ...

  6. 阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return fal的区别

    今天来看看前端的冒泡和事件默认事件如何处理 1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时 ...

  7. s事件之event.preventDefault()与event.stopPropagation()的阻止默认事件和阻止事件冒泡的用法

    event.preventDefault()用法介绍 该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作).例如,如果 type 属性是 "submit" ...

  8. jQuery阻止默认行为和阻止冒泡

    1.阻止默认行为:通常是值一个标签的默认行为,如button的提交表单,a标签的跳转等. 那如何阻止标签的默认行为? 1)return false 2) e.preventDefault(); < ...

  9. 锋利的jQuery-4--阻止事件冒泡和阻止默认行为

    阻止事件冒泡: 如果嵌套元素分别有自己的click事件,当点击内层元素时外层元素的事件也会被触发. $("span").bind("click", functi ...

  10. js之阻止事件冒泡(待修改)和阻止默认事件

    阻止默认事件(event.stopPropagation()): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...

随机推荐

  1. C++内存模型&空指针、野指针、函数指针和回调函数

    C++内存模型&空指针.野指针.函数指针和回调函数 C++内存模型 栈与堆的区别: 1.管理方式不同 栈是系统自动管理的,在超出作用域后,将自动被释放 堆是手动释放,若程序中不释放,程序结束后 ...

  2. 使用 Sa-Token 实现不同的登录模式：单地登录、多地登录、同端互斥登录

    一.需求分析 如果你经常使用腾讯QQ,就会发现它的登录有如下特点:它可以手机电脑同时在线,但是不能在两个手机上同时登录一个账号. 同端互斥登录,指的就是:像腾讯QQ一样,在同一类型设备上只允许单地点登 ...

  3. SEO相关配置 HTML meta标签总结与属性使用介绍

    HTML meta标签总结与属性使用介绍 <!-- 声明文档使用的字符编码 --> <meta charset='utf-8'> <!-- 优先使用 IE 最新版本和 C ...

  4. MIT 6.5840 Raft Implementation(2B, Log Replication)

    Raft实现思路+细节(2B) 任务分解 2B中最主要的任务就是进行日志的复制.Raft是一个强领导人的系统,这意味着所有的日志添加都是由领导人发起的,与之相类似的,还有很多其他的结论(它们都是比较显 ...

  5. 五分钟教你使用GitHub寻找优质项目

    前言 经常会有同学会问如何使用GitHub找到自己想要的项目,今天咱们就出一期快速入门教程五分钟教你使用GitHub寻找优质项目.GitHub作为世界上最大的项目开源平台之一,上面有着无数优质的开源项 ...

  6. K8S 对象

    本页说明了在 Kubernetes API 中是如何表示 Kubernetes 对象的, 以及使用 .yaml 格式的文件表示 Kubernetes 对象. https://kubernetes.io ...

  7. Blazor实战——Known框架多表增删改查

    多表增删改查示例 本章介绍学习多张表增.删.改.查功能如何实现,下面以销货出库单作为示例,该业务栏位如下: 销货出库单栏位 销货单号.销货日期.状态.客户.备注 销货出库单明细栏位 商品编码.商品名称 ...

  8. 记一次 .NET 某物流API系统 CPU爆高分析

    一:背景 1. 讲故事 前段时间有位朋友找到我,说他程序CPU直接被打满了,让我帮忙看下怎么回事,截图如下: 看了下是两个相同的程序,既然被打满了那就抓一个 dump 看看到底咋回事. 二:为什么会打 ...

  9. python-gitlab 一个简单demo

    背景 需要收集git仓库信息到数据库供前端展示 包括:仓库信息.仓库所有者.成员列表.提交信息.活跃情况等 需要定时启动.灵活触发 实现简介 使用gitlab v4 restful 接口 使用pyth ...

  10. Acwing 周赛88 题解

    比赛链接 ·A题 题目描述 给定一个整数\(x\),请你找到严格大于\(x\)且各位数字均不相同的最小整数\(y\). \(1000 \le x \le 9000\) 做法分析 发现数据范围很小,那么 ...