javascript 学习 右键点击事件 不要浏览器的右键工具栏

本文介绍了一个简单的HTML页面示例,该示例通过JavaScript禁用了页面中的右键点击菜单功能。当用户尝试在指定的div元素上使用鼠标右键时,控制台将记录事件信息,并阻止默认的上下文菜单显示。

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

1,效果


2,代码

<!doctype html>
<head>
<meta charset="utf-8"/>
<style>
#click-container{
width:400px;
height:400px;
background-color:#000000;
}
</style>
</head>
<body>
<div id="click-container"></div>
<script>
var clickbox=document.getElementById('click-container');
clickbox.oncontextmenu=function(e){
var e=event||window.event;
console.log(e);
return false;
}
</script>
</body>
</html>


### 实现 uni-easyinput 在 H5 中右键点击显示工具栏 在 H5 环境下使用 `uni-easyinput` 组件并实现右键点击显示工具栏的功能,可以通过监听鼠标事件来完成。具体来说,在组件上绑定 `contextmenu` 事件处理函数,并在此函数中控制工具栏的显示逻辑。 #### HTML 结构 首先定义输入框以及工具栏容器: ```html <template> <view class="container"> <!-- 输入框 --> <uni-easyinput @contextmenu.stop.prevent="showToolbar" v-model="inputValue"></uni-easyinput> <!-- 工具栏 --> <div id="toolbar" :style="{ display: toolbarVisible ? 'block' : 'none', position: 'absolute', top: `${mouseY}px`, left: `${mouseX}px` }"> <button @click="copyText">复制</button> <button @click="cutText">剪切</button> <button @click="pasteText">粘贴</button> </div> </view> </template> ``` #### JavaScript 部分 接着编写 Vue.js 方法来管理状态和行为: ```javascript <script> export default { data() { return { inputValue: '', toolbarVisible: false, mouseX: 0, mouseY: 0 }; }, methods: { showToolbar(event) { event.preventDefault(); // 阻止默认上下文菜单弹出 this.mouseX = event.clientX; this.mouseY = event.clientY; this.toolbarVisible = true; document.addEventListener('click', hideToolbar); function hideToolbar() { this.toolbarVisible = false; document.removeEventListener('click', hideToolbar); } }, copyText() { navigator.clipboard.writeText(this.inputValue).then(() => { console.log('已复制'); }).catch(err => { console.error('无法复制:', err); }); }, cutText() { if (this.inputValue !== '') { navigator.clipboard.writeText(this.inputValue).then(() => { this.inputValue = ''; console.log('已剪切'); }).catch(err => { console.error('无法剪切:', err); }); } }, pasteText() { navigator.clipboard.readText().then(text => { this.inputValue += text; console.log('已粘贴'); }).catch(err => { console.error('无法粘贴:', err); }); } } }; </script> ``` 此代码片段展示了如何创建一个带有自定义右键菜单的 `uni-easyinput` 输入框[^1]。当用户右击输入框时会触发 `@contextmenu` 事件,阻止浏览器默认的行为并通过设置样式属性使隐藏的工具栏可见;同时记录鼠标的坐标以便于定位工具栏的位置。此外还实现了基本的文字操作按钮如复制、剪切和粘贴等功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值