javascript 自定义鼠标右键菜单

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            #menu{
                border:solid 1px gray;
                width:100px;
                display:none;
                position:absolute;
                background-color:ghostwhite;
                margin: 0;
                padding: 0;
                list-style-type: none;
            }
            #menu>li{
                border-bottom: dashed 1px gray;
            }
        </style>
        <script type="text/javascript">
        window.onload=function(){
            var oUl=document.getElementById(‘menu‘);
                document.oncontextmenu=function(ev){
                    var oEvent=ev||event;
                    //一定要加px,要不然chrom不认
                    oUl.style.top=oEvent.clientY+‘px‘;
                    oUl.style.left=oEvent.clientX+‘px‘;
                    oUl.style.display=‘block‘;
                    return false;
                }
                document.onclick=function(){
                    oUl.style.display=‘none‘;
                }
        };
        </script>
    </head>
    <body>
<ul id="menu">
    <li><a href="http://www.baidu.com" target="_blank">百度一下</a></li>
    <li><a href="http://www.baidu.com" target="_blank">百度一下</a></li>
    <li><a href="http://www.baidu.com" target="_blank">百度一下</a></li>
    <li><a href="http://www.baidu.com" target="_blank">百度一下</a></li>
</ul>
    </body>
</html>
时间: 2024-10-07 00:18:20

javascript 自定义鼠标右键菜单的相关文章

简单的自定义鼠标右键菜单

Window95 在PC中引入上下文菜单的概念,即通过鼠标右键调出上下文菜单,不久之后这个概念也被引入web中. 接下来我们来学习一下如何js自定义鼠标右键的菜单.  1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>contextmenu</title> 6 </head> 7 <body> 8 //

JavaScript模拟鼠标右键菜单

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>右键菜单</title> <style type="text/css"> *{ margin: 0; padding: 0; } #menu{ width: 254px; /*background-color: #ccc;*/

JavaScript特效——自定义鼠标右键菜单

HTML 1 .menu{ 2 position:absolute; 3 width:200px; 4 background:#eee; 5 border:1px solid #ddd; 6 box-shadow:2px 2px 2px 2px #999; 7 display: none; 8 } 9 ul{ 10 padding:0; 11 margin:0; 12 list-style-type:none; 13 } 14 ul li a{ 15 padding:5px 10px; 16 d

JavaScript 自定义html元素鼠标右键菜单

自定义html元素鼠标右键菜单 实现思路 在触发contextmenu事件时,取消默认行为(也就是阻止浏览器显示自带的菜单),获取右键事件对象,来确定鼠标的点击位置,作为显示菜单的left和top值 编码实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> window.onload = function(){ var menu = document.

自定义菜单鼠标右键菜单打开选项

//将你想要添加到鼠标邮件的应用添加进来., 自动为Notepad增加鼠标右键菜单的打开选项 将下面的内容保存到bat批处理文件,然后将文件放到Notepad++.exe所在目录,双击运行即可. 文件内容: @echo off TITLE 自动为Notepad增加鼠标右键菜单的打开选项 cls color 0B echo 可按需要修改执行文件变量即可,目录路径会自动获取 echo 自动生卸载文件,方便不用的时候可以清除加入的注册表内容 ping 127.1 -n 3 >nul rem TheEx

完美拖拽 &amp;&amp;仿腾讯微博效果&amp;&amp; 自定义多级右键菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

OpenLayers 3 之 添加地图鼠标右键菜单

添加右键菜单,首先我们要监听鼠标右键点击的操作,我们知道鼠标右键事件名是 contextmenu,当鼠标在 html 元素之上,点击鼠标右键,便会触发 contextmenu 事件,在 contextmenu 事件的回调函数中实现相应的显示菜单功能即可. 那么在 openlayers 中,在地图中添加这个事件,我们从哪里下手呢?首先我们得了解 openlayers 的初始化页面的过程. openlayers 初始化页面过程 openlayers 也是一个前端库,那么它肯定离不开 html 的运用

js实现自定义鼠标右键-------Day45

又是周末了,不过其实这在国外应该算是一周的开始吧,不管怎么说,今天是在休息,放松我紧绷的神经,放松我有些疲惫的精神,昨晚上要裂了般的头疼,仿佛所有的数据都在脑子字面飞舞旋转,伴着一阵阵的恶心,当时把媳妇儿给吓坏了,实在不知道科比是每天怎么看到那凌晨四点钟的太阳的,这体质没法说了,而有一点却是不得不说,这身体真的才是一切的根本,友情建议各位朋友还是好好锻炼身体,我也要好好锻炼身体. 回顾这一周,项目组长的一句话给我很大的触动,原话我记不得怎么说了,大抵意思是说:不论你会多少,你终究要用上了才是你的

禁止按键F5和禁止鼠标右键菜单 js代码

<script language="javascript"> //禁止按键F5 document.onkeydown = function(e){ e = window.event || e; var keycode = e.keyCode || e.which; if( keycode = 116){ if(window.event){// ie try{e.keyCode = 0;}catch(e){} e.returnValue = false; }else{// f