[JavaScript] 如何自定义更改鼠标右键...

最新推荐文章于 2024-01-18 14:00:43 发布
最新推荐文章于 2024-01-18 14:00:43 发布
阅读量193 收藏
点赞数
文章标签： javascript ViewUI
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
" http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>鼠标右键更换</title>
<!-- CSS样式设定 -->
<style type="text/css">
<!--
.cMenu {
 position: absolute;
 visibility:hidden;
 color:#000000;
 width:150px;
 border:2px dashed #999999;
 background-color:#f0f0f0;
 font-size:9pt;
 line-height:18px;
 cursor:default;
 filter: Alpha(Opacity=80);
}

.menuitems {
padding-left:15px;
padding-right:10px;
}
-->
</style>
<!-- JS脚本 -->
<SCRIPT LANGUAGE="JavaScript">
// RightClickMenu

function showmenuie5(){
  var rightedge=document.body.clientWidth-event.clientX
  var bottomedge=document.body.clientHeight-event.clientY
  if (rightedge<ie5menu.offsetWidth)
   ie5menu.style.left=document.body.scrollLeft+event.clientX-ie5menu.offsetWidth
  else
   ie5menu.style.left=document.body.scrollLeft+event.clientX
  if (bottomedge<ie5menu.offsetHeight)
   ie5menu.style.top=document.body.scrollTop+event.clientY-ie5menu.offsetHeight
  else
   ie5menu.style.top=document.body.scrollTop+event.clientY
  ie5menu.style.visibility="visible"
  return false
}
function hidemenuie5(){
  ie5menu.style.visibility="hidden"
}
function highlightie5(){
  if (event.srcElement.className=="menuitems"){
   event.srcElement.style.backgroundColor="highlight"
   event.srcElement.style.color="white"
  }
}
function lowlightie5(){
  if (event.srcElement.className=="menuitems"){
   event.srcElement.style.backgroundColor=""
   event.srcElement.style.color="black"
  }
}
function jumptoie5(){
  if (event.srcElement.className=="menuitems"){
   if (event.srcElement.url != ''){
    if (event.srcElement.getAttribute("target")!=null)
     window.open(event.srcElement.url,event.srcElement.getAttribute("target"))
    else
     window.location=event.srcElement.url
   }
  }
}

</SCRIPT>
</head>
<body>
<!-- 鼠标右键更换内容，更换下面相对应名称和链接即可。 -->
<RightClick>
<!--[if IE]>
<div id="ie5menu" class="cMenu" onMouseover="highlightie5()" onMouseout="lowlightie5()" onClick="jumptoie5()">
<div class="menuitems" url=" http://www.cnrui.cn/blog">我的BLOG</div>
<HR>
<div class="menuitems" url=" http://www.ryanxia.com" target="_blank">RYAN空间</div>
<div class="menuitems" url=" http://www.awflasher.com" target="_blank">AWflash</div>
<div class="menuitems" url=" http://www.a-fei.net" target="_blank">ONLYMAKE</div>
<div class="menuitems" url=" http://www.rystudio.com" target="_blank">锐意工作室</div>
<HR>
<div class="menuitems" url=" http://www.cnrui.cn/blog/tools.asp" target="_blank">在线工具</div>
<div class="menuitems" url=" http://www.cnrui.cn/blog/pplive.asp" target="_blank">在线电视</div>
<HR>
<div class="menuitems" url=" http://www.cnrui.cn/live/index.html" target="_blank">BTLIVE</div>
<div class="menuitems" url=" http://www.ao-w.com/" target="_blank">奥网科技</div>
<div class="menuitems" url=" http://www.synacast.com/" target="_blank">上海聚力传媒</div>
<HR>
<div class="menuitems" url=" http://www.cnrui.cn/blog/gbook.asp" target="_blank">给我留言</div>
<![endif]-->
<script language="JavaScript">
<!--
if (document.all&&window.print){
 ie5menu.className="cMenu"
 document.οncοntextmenu=showmenuie5
 document.body.οnclick=hidemenuie5
}
//-->
</script>
</RightClick>
<!-- 鼠标右键更换内容完毕 -->
</body>
</html>
weixin_33696106
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS+JavaScript打造超酷右键菜单
努力
04-11 756
　　其实在网页上实现右键菜单的风格化已经是一个老话题了，正常情况下，网页上的右键菜单是默认IE右键选项，包括了一些常用的功能。　　但有时候我们会遇到这样的问题，我们希望禁止访问者使用右键菜单或者希望屏蔽右键菜单的某些功能，比如，为了保护网页内容我们不希望访问者通过右键菜单来查看网页源代码，也不希望其通过右键来对网页内容进行选取、复制等，很多网页设计者在考虑这个问题的时候都是简单地对右键进行屏蔽
自定义右键菜单 html,自定义右键菜单代码详解(转)
weixin_39605347的博客
06-02 209
< style >< !--/*定义菜单方框的样式1*/.skin0 {position:absolute;text-align:left;width:200px;/*宽度，可以根据实际的菜单项目名称的长度进行适当地调整*/border:2px solid black;background-color:menu; /*菜单的背景颜色方案，这里选择了系统默认的菜单颜色*/font-...
javascript实现自定义右键菜单（绑定鼠标左右键）
m0_71765265的博客
01-26 2979
js实现自定义右键思路： 1.绑定鼠标右键函数。 2.获取鼠标右键按下位置的x坐标（到左面的距离），y坐标（到上面的距离）。 3.获取滚动条向下滚动距离，获取滚动条向左滚动距离4.最后+‘px’,补全单位，添加到元素style属性，将元素移动到鼠标右键位置。
前端自定义右键菜单（其余内容也可以）
最新发布
qq_34635938的博客
01-18 658
整个过程主要分3个部分设置想显示的内容（场景为菜单）拦截右键默认的菜单在预期位置显示。
JS仿谷歌浏览器鼠标右键菜单.zip
10-08
【标题】"JS仿谷歌浏览器鼠标右键菜单.zip"是一个包含JavaScript和CSS代码的压缩包，目的是实现一个类似于谷歌浏览器的鼠标右键点击时显示的菜单效果。在网页开发中，这种功能可以增强用户体验，提供自定义的右键...
JS鼠标右键移动批量选中代码.zip
10-08
标题中的"JS鼠标右键移动批量选中代码.zip"指的是一个使用JavaScript实现的特性，它允许用户通过鼠标右键点击并拖动来批量选择网页上的元素。这种功能常见于数据表格或者列表，使得用户能够方便地操作大量信息。在...
JavaScript 自定义html元素鼠标右键菜单功能
01-21
自定义html元素鼠标右键菜单 实现思路 在触发contextmenu事件时，取消默认行为(也就是阻止浏览器显示自带的菜单),获取右键事件对象，来确定鼠标的点击位置，作为显示菜单的left和top值 编码实现 <!DOCTYPE html>...
Bootstrap鼠标右键下拉菜单特效.zip
07-11
Bootstrap鼠标右键下拉菜单特效是一种常见的网页交互设计，它利用JavaScript和Bootstrap框架来实现用户在鼠标右键点击时出现的下拉菜单。这个压缩包文件包含了一个完整的示例，帮助开发者了解如何在自己的项目中集成...
js网页点击右键菜单代码.zip
10-08
通过监听鼠标右键点击事件（'contextmenu'），我们可以阻止浏览器的默认行为（即显示默认的右键菜单），然后自定义我们需要展示的菜单项。例如，可以使用以下代码来实现： ```javascript document.addEventListener...
JS设置鼠标右键菜单
08-04
通过JS来设置鼠标的右键..使鼠标右键能有自己想要的功能..
js实现 html 鼠标右键 菜单
09-23
根目录 菜单一 菜单二 go 修改 删除 function showMenu(id){ menuForm.id.value = id; if("" == id){ } else{ popMenu(itemMenu,100,"111"); } event.returnValue=false; event.cancelBubble=true; return false; } /** *显示弹出菜单 *menuDiv:右键菜单的内容 *width:行显示的宽度 *rowControlString:行控制字符串，0表示不显示，1表示显示，如“101”，则表示第1、3行显示，第2行不显示 */ function popMenu(menuDiv,width,rowControlString){ //创建弹出菜单 var pop=window.createPopup(); //设置弹出菜单的内容 pop.document.body.innerHTML=menuDiv.innerHTML; var rowObjs=pop.document.body.all[0].rows; //获得弹出菜单的行数 var rowCount=rowObjs.length; //循环设置每行的属性 for(var i=0;i<rowObjs.length;i++) { //如果设置该行不显示，则行数减一 var hide=rowControlString.charAt(i)!='1'; if(hide){ rowCount--; } //设置是否显示该行 rowObjs[i].style.display=(hide)?"none":""; //设置鼠标滑入该行时的效果 rowObjs[i].cells[0].onmouseover=function(){ this.style.background="#818181"; this.style.color="white"; } //设置鼠标滑出该行时的效果 rowObjs[i].cells[0].onmouseout=function(){ this.style.background="#cccccc"; this.style.color="black"; } } //屏蔽菜单的菜单 pop.document.oncontextmenu=function(){ return false; } //选择右键菜单的一项后，菜单隐藏 pop.document.onclick=function(){ pop.hide(); } //显示菜单 pop.show(event.clientX-1,event.clientY,width,rowCount*25,document.body); return true; } function create(){ alert("create" + menuForm.id.value + "!"); } function update(){ alert("update" + menuForm.id.value + "!"); } function del(){ alert("delete" + menuForm.id.value + "!"); } function clickMenu(){ alert("you click a menu!"); }
JS实现页面右键菜单
Sun_blog
05-17 3649
JS实现页面右键菜单
前端实现右键自定义菜单
fe_watermelon的博客
05-17 2868
大家好，我是前端西瓜哥。本文将讲解 Web 页面如何实现自定义菜单功能。线上 demo：https://codepen.io/F-star/pen/WNOvQVQ思路核心思路是：注册 contextmenu 事件，取消该事件的默认行为，然后通过 event 对象拿到光标相对视口的坐标位置（event.clientX 和 event.clientY），通过绝对定位的方式，将自己自定义的初始化时不可见的 div 块显示出来。实现DOM 结构首先是 DOM 结构。结构依次为：div.page-view 为注册 c
JS自定义鼠标右键菜单
越陌度阡
06-08 963
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>自定义鼠标右键菜单</title> <style> * { ...
JS自定义右键菜单
weixin_41897680的博客
04-14 4388
JS自定义右键菜单
JS页面中自定义“鼠标右键”功能
QUX轻博客
07-29 1962
我们经常用鼠标在桌面上点来点去的，你是否知道，网页的鼠标右键的菜单也是可以自定义的，你还在为了网页源码禁止别人F12，或者鼠标右键，你可以试试自定义鼠标右键，将你网...
js自定义鼠标右键菜单
susuzhe
03-15 3476
我们在浏览器上点击右键会出现一些经常见的菜单，下面我将介绍如何自定义自己的菜单。 自定义右键菜单 body,ul,li{margin:0;padding:0;} body{font:12px/24px arial;} #menu{position:absolute;top:-9999px;left:-9999px;width:100px;border-radius:3px;list-s
LANBOR2000菜单的VBS版拖动功能加强
jujuchen的专栏
05-30 449
foolpot2001菜单body,td,a {font-size:9pt;color:black}.none{border:black 1px solid;background:D9D9D9;padding-top:2}.over {border:black 1px solid;background:707888;color:white;padding-top:2}可拖动的菜单onmouseou
chrome pdf.js
05-27
2. 在 PDF 文件中单击鼠标右键，选择“打印”； 3. 在打印设置页面中，将“目标”选项更改为“另存为 PDF”； 4. 单击“保存”按钮，然后选择保存位置和文件名。 完成上述步骤后，Chrome 浏览器将使用 PDF.js 库...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值