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. DevOps｜从腾讯TEG CDC解散聊技术中台价值和建设

    近日一则腾讯TEG CDC整个部门解散的消息在很多群里炸了锅,有的唱衰互联网行业,有的唉声叹气,还有的甩锅到 AGI 的发展.总体上来说,这个事情的确已经发生了,我想从组织架构和整体效能这两方面来分析 ...

  2. 【小小Demo】微信公众号如何接入微信机器人

    微信对话开放平台文档 官方文档 平台简介 微信对话开放平台开放了微信在对话领域积累多年的的智能对话技术,开发者及非开发者可简单.快速地搭建智能对话机器人(智能客服), 并接入公众号.小程序等,为业务赋 ...

  3. CVPR 2023 | RCF：完全无监督的视频物体分割

    TLDR: 视频分割一直是重标注的一个task,这篇CVPR 2023文章研究了完全不需要标注的视频物体分割.仅使用ResNet,RCF模型在DAVIS16/STv2/FBMS59上提升了7/9/5% ...

  4. 【最新】Delphi XE7 绿色版下载，亲测可用！

    最后更新时间 2017-12-05. 本文整理自2ccc盒子iny的帖子 → 链接到原贴 破解 → 链接 一.绿色版介绍 绿色版除了不包含 FastReport(RAD Studio自带的FastRe ...

  5. VSCode中的快捷键

    VS Code中的快捷键 文件和编辑操作 Ctrl+S:保存文件 Ctrl+K S:保存全部文件 Ctrl+C:复制 Ctrl+V:粘贴 Ctrl+X:剪切 Ctrl+F:查找 Ctrl+H:替换 C ...

  6. python 镜像

    https://pypi.douban.com/simple/   豆瓣源 pip install -i https://pypi.douban.com/simple/ pymysql # pymys ...

  7. Django:TypeError: view must be a callable or a list/tuple in the case of include().

    错误: path("uploads/(?P<path>.*)$", 'django.views.static.serve', {"document_root& ...

  8. .NET5从零基础到精通：全面掌握.NET5开发技能

    C#版本新语法-官网: C#7:https://docs.microsoft.com/zh-cn/dotnet/csharp/whats-new/csharp-7 C#8:https://docs.m ...

  9. 论文解读（WIND）《WIND: Weighting Instances Differentially for Model-Agnostic Domain Adaptation》

    Note:[ wechat:Y466551 | 可加勿骚扰,付费咨询 ] 论文信息 论文标题:WIND: Weighting Instances Differentially for Model-Ag ...

  10. 介绍 SafeCoder 解决方案服务

    今天这篇推文,我们打算给自己打一波"广告",向大家隆重介绍 SafeCoder-- 一款专为企业打造的代码助手解决方案. SafeCoder 旨在成为你完全合规且自托管的结对编程工 ...