uni 禁用浏览器右键菜单事件

最新推荐文章于 2024-08-22 10:10:50 发布

原创最新推荐文章于 2024-08-22 10:10:50 发布 · 869 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #chrome

uniapp 专栏收录该内容

16 篇文章

订阅专栏

博客围绕前端开发中实现右击出现工具条功能展开。先介绍禁用浏览器右击事件，可用@contextmenu和@click.right实现，还提及用el-popover布局菜单。同时阐述了事件修饰符，包括其定义、各平台支持情况及使用注意事项，如顺序重要、兼容各端的绑定方式等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

想做一个右击出现工具条功能

浏览器默认右击会出现字段的操作条

1、禁用浏览器右击事件

@contextmenu.prevent="openMenu"

2、然后使用@contextmenu 和@click.right都行

3、el-popover实现菜单相对位置布局

<el-popover popper-style="min-width:120rpx; padding: 10px;" placement="right" :width="60"
				trigger="contextmenu" :visible="item.isShowTool">
				<template #reference>
					<VueDragResize :isActive="true" :w='200' :h="200" v-on:resizing="resize"
						:style="'opacity:'+item.opaCity+';background-image:url('+item.imageValue+')'"
						:parentLimitation='true' :isDraggable='isDraggable' v-on:dragging="resize"
						@click.right='showTool(index)'>
						<view class="text" v-if="item.type == 'text'">
							<text
								:style="'color:' + item.colors+';fontSize:'+item.fontSize+'rpx;fontWeight:' + item.fontWeight+';letterSpacing:'+item.letterSpacing+'rpx;opaCity:'+item.opaCity">
								{{ item.title}}</text>
						</view>
						<view v-else-if="item.type == 'img'">
							<image :src="item.imageValue"></image>
						</view>

					</VueDragResize>
				</template>
				<template #default>
					<view>
						<view class='tool' @click="rightClickTool(index,'edit')">编辑</view>
						<view class='tool' @click="deleteClick(index,'delete')">删除</view>
					</view>
				</template>

事件修饰符

修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 @事件对于触发的事件调用 event.preventDefault()：

@事件（v-on）提供了事件修饰符:

.stop: 各平台均支持，使用时会阻止事件冒泡，在非 H5 端同时也会阻止事件的默认行为
.native: 监听原生事件，各平台均支持
.prevent: 仅在 H5 平台支持
.capture: 仅在 H5 平台支持
.self: 仅在 H5 平台支持
.once: 仅在 H5 平台支持
.passive: 仅在 H5 平台支持

	<!-- 阻止单击事件继续传播 -->
	<view @click.stop="doThis"></view>

复制代码

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 @click.prevent.self 会阻止所有的点击，而 @click.self.prevent 只会阻止对元素自身的点击。

注意

为兼容各端，事件需使用 @ 的方式绑定，请勿使用小程序端的 bind 和 catch 进行事件绑定；也不能在 JS 中使用event.preventDefault()和event.stopPropagation()方法；
若需要禁止蒙版下的页面滚动，可使用 @touchmove.stop.prevent="moveHandle"，moveHandle 可以用来处理 touchmove 的事件，也可以是一个空函数。

<view class="mask" @touchmove.stop.prevent="moveHandle"></view>

复制代码

按键修饰符：uni-app 运行在手机端，没有键盘事件，所以不支持按键修饰符。