JS自定义右键菜单案例

要求:点击页面鼠标右键,阻止默认右键菜单的弹出,并弹出自定义右键菜单。

效果示例:

参考代码:

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>习题</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #div1 {
            position: absolute;
            width: 80px;
            background: #ccc;
        }
    </style>
    <script>

        window.onload = function () {
            //此处写代码
            var oDiv=document.getElementById(‘div1‘);
            oDiv.style.display=‘none‘;
            document.oncontextmenu=function(ev){
                var oEvent=event||ev;
                oDiv.style.display=‘block‘;
                oDiv.style.left=oEvent.clientX+‘px‘;
                oDiv.style.top=oEvent.clientY+‘px‘;
                return false;
            }
            document.onclick=function(){
                oDiv.style.display=‘none‘;
            }
        }
    </script>
</head>

<body>
    <div id=‘div1‘>
        <ul>
            <li>aaa</li>
            <li>bbb</li>
            <li>ccc</li>
        </ul>
    </div>
</body>
</html>

原文地址:https://www.cnblogs.com/f6056/p/11045427.html

时间: 2024-10-11 16:58:44

JS自定义右键菜单案例的相关文章

js之自定义右键菜单

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自定义右键菜单</title> <style> body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{ m

自定义右键菜单

自定义右键菜单 技术一般水平有限,有什么错的地方,望大家指正. 自定义右键菜单,对于一些ERP系统,功能操作比较多,所以我们通常把常用的几个功能放在自定义的右键菜单里方便用户使用. 实现自定义菜单很简单,首先我们要屏蔽原始的右键菜单,自定义菜单出现在鼠标的位置,点击隐藏自定义菜单,过程就是这样的. *{margin:0;padding:0} a{text-decoration:none} ul li{list-style:none} .menu{border:1px solid black;bo

jquery 自定义右键菜单

如果要自定义右键菜单,那么就需要禁止原本的右键菜单,代码如下 document.oncontextmenu = new Function("return false;");//禁止右键默认菜单 该自定义右键菜单是基于jquery上的 html+css: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&g

自定义右键菜单,禁用浏览器自带的右键菜单[右键菜单实现--Demo]

许多从事Web开发的会发现有些事,我们需要禁用浏览器本事自带的右键菜单,而实现自定义的右键菜单下面我们也来实现一个自定义的右键菜单 首先来创建JSP页面 1 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> 2 <html> 3 <head> 4 <title>右键菜单</title> 5 <s

阻止右键菜单(阻止默认事件)&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-

[ActionScript 3.0] 自定义右键菜单

将自定义右键菜单的一些属性和方法归纳到AddRightMenu.as,通过实例化此类,调用相关方法即可测试! 1 package 2 { 3 import flash.display.Sprite; 4 import flash.events.ContextMenuEvent; 5 import flash.net.navigateToURL; 6 import flash.net.URLRequest; 7 import flash.ui.ContextMenu; 8 import flash

【连载】Bootstrap开发漂亮的前端界面之自定义右键菜单

连载: 1<教你用Bootstrap开发漂亮的前端界面> 2.<Bootstrap开发漂亮的前端界面之实现原理> 网页中的自定义右键菜单越来越普遍,自定义右键菜单可以增强用户体验,让用户使用软件更加的简便,今天我们就来基于Bootstrap来开发自己的自定义右键菜单. 一.首先,准备好自定义菜单,供单击右键展示: 菜单默认不可见,可以通过 style="display:block" 进行调试预览; <ul class="dropdown-menu

javascript自定义右键菜单代码

javascript自定义右键菜单代码: 右键菜单这个再熟悉不过了,使用电脑的话每天几乎都要操作上千遍右键菜单,下面分享一段自定义右键菜单的代码实例,希望能够给需要相关内容的朋友带来帮助,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao

仿EXCEL插件,智表ZCELL产品V1.7 版本发布,增加自定义右键菜单功能

详细请移步 智表(ZCELL)官网www.zcell.net 更新说明  这次更新主要应用户要求,主要解决了自定义右键菜单事件的支持,并新增了公式中自定义函数传参.快捷键剪切等功能,欢迎大家体验使用. 本次版本更新内容如下: 版本: V1.7发布日期:2019-07-05 1.优化公式中的自定义函数,增加传入参数的支持. 2.增加剪切快捷键CTL+X支持功能. 3.增加自定义右键菜单功能,用户可以自定义开发右键功能,通过BindEvents接口实现. 4.新增获取单元格是否合并单元格接口GetC