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>

    分享技术,分享快乐!
     
     
     
  • 相关阅读:
    前端主页
    配置站点
    前台
    数据库配置
    后台:Django项目创建
    虚拟环境的搭建
    pip安装源
    AngularJS Scope(作用域)
    scala中的匿名函数 ==> 简单示例
    scala中的内部类 ==> 简单示例
  • 原文地址:https://www.cnblogs.com/babywin/p/6245792.html
Copyright © 2011-2022 走看看