vue阻止浏览器右键默认行为

最新推荐文章于 2024-04-19 15:17:57 发布
最新推荐文章于 2024-04-19 15:17:57 发布
阅读量4.8k 收藏 23
点赞数 11
分类专栏： javascript vue 文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44111864/article/details/110928302
版权

一、在需要阻止的区域添加 @contextmenu.prevent 事件

<div @contextmenu.prevent></div>

二、如果存在父子级关系需要添加 @contextmenu.prevent.capture ， 事件修饰符capture给元素添加一个监听器，当元素发生冒泡时，先触发带有该修饰符的元素

<div @contextmenu.prevent.capture>
   <p onclick="func2">
     <span οnclick=""func3>
     </span>
   </p>
 </div>
路人甲小码
关注
  • 11
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
vue禁止右键
qq_59175937的博客
09-08 1420
【代码】vue禁止右键。
禁止点击鼠标右键
06-24
本文介绍了用户javascript实现禁止点击鼠标右键的方法
vue开发----关于阻止浏览器右键显示的方法
最新发布
weixin_51232434的博客
04-19 298
二、使用监听事件的 .preventDefault() 方法。一、在HTML元素中使用 .prevent。
vue阻止右键默认事件
浩星
09-08 2973
前言： vue阻止右键事件 在app.vue里面加一句 @contextmenu.prevent="" <template> <div id="app" @contextmenu.prevent=""> <router-view/> </div> </template> <style lang="less"> </style> ...
vue阻止右键默认行为
weixin_45536133的博客
07-15 1146
vue阻止右键默认行为 <!--不阻止右键菜单(浏览器行为)，右键执行函数show--> <input type="button" value="按钮" @contextmenu="show()"> <!--阻止右键菜单--> <input type="button" value="按钮1" @contextmenu.prevent> <!--阻止右键菜单(浏览器行为)，右键执行函数show--> <input type="button" v
屏蔽浏览器默认的右击事件
weixin_40578880的博客
10-26 494
//方法一 document.oncontextmenu = function(){ return false; }; //方法二 不支持 IE < 9 window.addEventListener('contextmenu', function(e){ e.preventDefault(); }, false); 通常输入框不禁用 documen...
阻止浏览器默认事件
weixin_51968635的博客
11-12 176
阻止浏览器默认事件 阻止鼠标右键 <div id="box"> </div> var oBox = document.getElementById("box") //鼠标右键事件：阻止鼠标右键 document.oncontextmenu = function(evt) { console.log("xixi") var e = evt || event; oBox.style.l.
vue 自定义右键样式的实例代码
10-16
在 Vue 中自定义右键样式涉及到对浏览器默认行为的拦截以及自定义菜单的呈现。在提供的实例代码中，我们可以通过以下五个步骤来实现这一功能： 1. **阻止默认右键**： - 使用 `@contextmenu.prevent` 事件监听器，...
Vue安装浏览器开发工具的步骤详解
10-17
Vue浏览器开发工具（Vue DevTools）就是这样一个神器，它提供了一套直观的界面，允许开发者查看和操作Vue实例的状态，以及组件树等重要信息。 安装Vue DevTools的详细步骤如下： 1. **下载工具**： 首先，你需要...
基于vue的鼠标右键菜单事件本组件提供右键菜单的显示和隐藏
08-10
- `v-on`可以结合`修饰符`，如`.prevent`阻止默认行为，`.stop`阻止事件冒泡等。 4. **自定义菜单** - 菜单项可以由外部父组件传递，通过`props`进行数据传递。 - 使用计算属性（computed properties）或方法...
HTML兼容浏览器的右键菜单
02-06
// 阻止默认的右键菜单 // 显示自定义菜单代码 }); ``` 这里的`contextmenu`是鼠标右键点击事件，`event.preventDefault()`用于阻止浏览器默认的右键菜单弹出。 **CSS样式** CSS用于美化我们的自定义右键菜单。...
高德地图实现绘制覆盖物，自定义右键菜单
02-26
使用高德地图js-api实现绘制圆形、矩形、多边形；右键可删除可自定义菜单；
基于contextMenu的右键菜单demo
12-06
右键菜单在实际的项目开放中很少有用到，但也有少部分的项目要求用到。之前自己在网上找了好久，也没有一个完整的demo,但自己的项目要求用到，只能整理了一下网上的资料，现在把完整的一个demo上传至此，不对之处请不吝赐教。
vue-devtools.rar
08-14
在Chrome浏览器中安装Vue Devtools非常简单，你只需将提供的“vue-devtools(1).crx”文件拖放到浏览器的扩展管理页面，或者直接右键点击该文件选择“添加到Chrome”。确保你已经启用了开发者模式，因为默认情况下，...
vue 阻止 鼠标右键事件
qq_42353989的博客
08-08 2653
1.我们在vue中默认的写法是 <div @click="selectBtn(index)"></div> 2.我们只需要加上@contextmenu.prevent 这个，就可实现了 <div @click="selectBtn(index)" @contextmenu.prevent="selectBtn"></div> ...
vue中的修饰符
要温柔以待的博客
10-10 122
文章目录一、修饰符有那些?事件修饰符有那些(不全)按键修饰符有那些鼠标修饰符有那些 一、修饰符有那些? 事件修饰符 按键修饰符 鼠标修饰符 事件修饰符有那些(不全) .stop 等同于javascript中的 .stopPropagation( ) 防止事件的冒泡 .prevent 等同于javascript中的.preventDefault() 阻止事件默认行为 .capture 于事件冒泡的方向正好相反,事件捕获 这个是由外到内 .self 只会触发自己(文本内容)范围之内的事件,但是不包
vue 鼠标右击事件@contextmenu.prevent
jyn15159的博客
05-06 6856
vue 鼠标右击事件@contextmenu.prevent 需求：阻止浏览器默认事件，添加自定义事件 <div @contextmenu.prevent="rightClick"></div> 自定义事件： methods:{ rightClick () { console.log("鼠标右击事件") }, } ...
记录一次多dom层级下使用VContextmenu的坑
PerryDP的博客
08-20 286
先看需求 分组上右键弹出分组操作菜单 空白处右键弹出创建分组菜单 一开始代码结构 <div style="padding-bottom: 100px" v-contextmenu:newGroupContextmenu > <el-collapse> <el-co
vue第四天基础知识
Little_Fishs的博客
02-27 266
一、表单输入绑定 v-model 指令在表单 、 及 元素上创建双向数据绑定。 注意：v-model 会忽略所有表单元素的 value、checked、selected 属性的初始值而总是将 Vue 实例的数据作为数据来源。应该通过 JavaScript 在组件的 data 选项中声明初始值。 eg: html: <input v-model="msg" placeholder="edit...
vue 怎么屏蔽浏览器右键菜单
06-02
在 Vue 中屏蔽浏览器右键菜单可以通过在 Vue 组件中绑定 `contextmenu` 事件并在事件处理函数中调用 `preventDefault()` 方法来实现。具体代码如下： ```html <template> <div @contextmenu.prevent> <!-- 组件内容 --> </div> </template> ``` 在上面的代码中，我们在 `div` 元素上绑定了 `contextmenu` 事件，并调用了 `preventDefault()` 方法来阻止默认的右键菜单行为。这样就可以屏蔽浏览器右键菜单了。 需要注意的是，这种方法只能屏蔽浏览器自带的右键菜单，如果用户使用插件或其他工具自定义了右键菜单，则无法屏蔽。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值