zoukankan      html  css  js  c++  java
  • 自定义右键菜单

    在自定义右键菜单前,我们先了解一下事件默认行为:

    事件默认行为:当一个事件发生的时候浏览器自己会默认做的事情;
    怎么阻止?
    当前这个行为是什么事件触发的,然后在这个事件的处理函数中使用return false;
    //oncontextmenu : 右键菜单事件,当右键菜单(环境菜单)显示出来的时候触发
    document.oncontextmenu = function() {
    return false;
    }

    示例:
    1.样式:
    #div1 {100px; height: 200px; border: 1px solid red; position: absolute; display: none;}

    2.结构:
    <body>
    <div id="div1"></div>
    </body>
    3.逻辑
    <script>
    window.onload = function() {
    var oDiv = document.getElementById('div1');
    document.oncontextmenu = function(ev) { //右键菜单事件
    var ev = ev || event;
    oDiv.style.display = 'block';
    oDiv.style.left = ev.clientX + 'px'; // ev.clientX鼠标的横向距离
    oDiv.style.top = ev.clientY + 'px'; // ev.clientY鼠标的纵向距离
    return false;
    }
    document.onclick = function() {
    oDiv.style.display = 'none';
    }

    }
    </script>

    分享技术,分享快乐!
     
     
     
  • 相关阅读:
    ARP 协议
    3GPP 5G UPF
    OpenStack v.s. Kubernetes
    C#- FTP递归下载文件
    C#- WinForm获取 当前执行程序路径的几种方法
    C#- 布署WinForm程序
    Delphi- 连接MySQL数据库BDE
    Delphi- 内置数据库的使用例子BDE
    CSS- 兼容样式记录
    Delphi- DLL操作
  • 原文地址:https://www.cnblogs.com/babywin/p/6245792.html
Copyright © 2011-2022 走看看