iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > node.js >javascript该如何隐藏右键
  • 500
分享到

javascript该如何隐藏右键

2024-04-02 19:04:59 500人浏览 泡泡鱼
摘要

javascript该如何隐藏右键,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。javascript隐藏右键的方法:1、打开相应的代码文件;2

javascript该如何隐藏右键,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

javascript隐藏右键的方法:1、打开相应的代码文件;2、使用“window.oncontextmenu=function(e){e.preventDefault();}”方法禁用鼠标右键菜单即可。

本文操作环境:windows7系统、javascript1.8.5、Dell G3电脑。

javascript怎么隐藏右键?

js设置或禁用鼠标右键菜单

当用户点击鼠标右键的时候oncontextmenu事件被触发

js禁用鼠标右键菜单

window.oncontextmenu=function(e){
    //取消默认的浏览器自带右键 很重要!!
    e.preventDefault();
}

js自定义鼠标右键菜单

html准备自定义菜单项

<div id="menu">
            <div class="menu">功能1</div>
            <div class="menu">功能2</div>
            <div class="menu">功能3</div>
            <div class="menu">功能4</div>
            <div class="menu">功能5</div></div>

CSS设置菜单项样式

#menu{
    width: 0; 
    height: 125px;
    overflow: hidden; 
    box-shadow: 0 1px 1px #888,1px 0 1px #ccc;
    position: absolute; 
}
.menu{
    width: 130px;
    height: 25px;
    line-height: 25px;
    padding: 0 10px;
}

js控制菜单的显示与隐藏

window.oncontextmenu=function(e){
    //取消默认的浏览器自带右键 很重要!!
    e.preventDefault();
    //获取我们自定义的右键菜单
    var menu=document.querySelector("#menu");
    //根据事件对象中鼠标点击的位置,进行定位
    menu.style.left=e.clientX+'px';
    menu.style.top=e.clientY+'px';
    //改变自定义菜单的宽,让它显示出来
    menu.style.width='100px';
    menu.style.height='auto';
}
//鼠标左键任意位置单击, 关闭右键菜单
window.onclick=function(e){
    //用户触发click事件就可以关闭了,因为绑定在window上,按事件冒泡处理,不会影响菜单的功能
    document.querySelector('#menu').style.height=0;
}

看完上述内容,你们掌握javascript该如何隐藏右键的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注编程网node.js频道,感谢各位的阅读!

--结束END--

本文标题: javascript该如何隐藏右键

本文链接: https://www.lsjlt.com/news/88184.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • javascript该如何隐藏右键
    javascript该如何隐藏右键,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。javascript隐藏右键的方法:1、打开相应的代码文件;2...
    99+
    2022-10-19
  • javascript如何隐藏li
    今天小编给大家分享一下javascript如何隐藏li的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了...
    99+
    2022-10-19
  • javascript如何隐藏行
    这篇文章主要介绍了javascript如何隐藏行的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇javascript如何隐藏行文章都会有所收获,下面我们一起来看看吧。 ...
    99+
    2022-10-19
  • win11英文键盘如何隐藏
    这篇文章主要介绍“win11英文键盘如何隐藏”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“win11英文键盘如何隐藏”文章能帮助大家解决问题。英文键盘是无法隐藏的,但是我们可以直接在输入法中将它删除...
    99+
    2023-07-01
  • javascript如何隐藏文字
    这篇文章主要为大家展示了“javascript如何隐藏文字”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“javascript如何隐藏文字”这篇文章吧。 ...
    99+
    2022-10-19
  • JavaScript如何隐藏元素
    这篇文章将为大家详细讲解有关JavaScript如何隐藏元素,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。 方法:1、“元素对象.style....
    99+
    2022-10-19
  • javascript如何让li隐藏
    这篇文章主要讲解了“javascript如何让li隐藏”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“javascript如何让li隐藏”吧! ...
    99+
    2022-10-19
  • javascript如何隐藏控件
    在Web开发过程中,隐藏控件是非常常见的需求,特别是在一些动态交互的页面中,常常需要根据不同的操作显示或隐藏一些控件元素。在JavaScript中,隐藏控件可以通过多种方式实现,例如修改元素的CSS样式、修改元素的display属性等。在本...
    99+
    2023-05-14
  • javascript如何隐藏表格
    这篇文章给大家分享的是有关javascript如何隐藏表格的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。JavaScript是什么JavaScript是一种直译式的脚本语言,其解释器被称为JavaScript引擎...
    99+
    2023-06-14
  • javascript如何让div隐藏
    小编给大家分享一下javascript如何让div隐藏,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!javascript让div隐藏的方法:首先使用div标签创建一个模块,并设置其id为mydiv;然后使用button标签...
    99+
    2023-06-14
  • win11右下角程序隐藏了如何解决
    这篇文章主要介绍“win11右下角程序隐藏了如何解决”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“win11右下角程序隐藏了如何解决”文章能帮助大家解决问题。首先右键任务栏,在其中选择“任务栏设置”...
    99+
    2023-07-01
  • javascript如何隐藏元素值
    这篇文章主要讲解了“javascript如何隐藏元素值”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“javascript如何隐藏元素值”吧! ...
    99+
    2022-10-19
  • javascript如何隐藏html元素
    这篇文章主要介绍“javascript如何隐藏html元素”,在日常操作中,相信很多人在javascript如何隐藏html元素问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”...
    99+
    2022-10-19
  • javascript如何隐藏option选项
    这篇文章主要讲解了“javascript如何隐藏option选项”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“javascript如何隐藏option选项”...
    99+
    2022-10-19
  • JavaScript如何隐藏边框线
    本篇内容主要讲解“JavaScript如何隐藏边框线”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JavaScript如何隐藏边框线”吧! ...
    99+
    2022-10-19
  • JavaScript如何隐藏html标签
    这篇文章主要介绍JavaScript如何隐藏html标签,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!方法:1、利用“document.getElementById("id...
    99+
    2022-10-19
  • javascript如何隐藏显示div
    这篇文章给大家分享的是有关javascript如何隐藏显示div的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。JavaScript有什么特点1、js属于一种解释性脚本语言;2、在绝大多数浏览器的支持下,js可以在...
    99+
    2023-06-14
  • JavaScript如何禁用右键
    这篇文章将为大家详细讲解有关JavaScript如何禁用右键,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。禁用右键有时候你可能想要禁止用户点击右键。虽然这个需求很少见,但...
    99+
    2022-10-19
  • iOS键盘如何添加隐藏键盘功能
    本文实例为大家分享了iOS添加隐藏键盘功能的具体方法,供大家参考,具体内容如下 键盘添加个隐藏键盘功能 使用方法:导入XMCustomKeyBoard.h [XMCustomKeyB...
    99+
    2022-06-05
    iOS 键盘
  • javascript如何隐藏元素边框
    这篇文章主要讲解了“javascript如何隐藏元素边框”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“javascript如何隐藏元素边框”吧! ...
    99+
    2022-10-19
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作