专栏首页授客的专栏JavaScript 自定义html元素鼠标右键菜单

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

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

实现思路

在触发contextmenu事件时,取消默认行为(也就是阻止浏览器显示自带的菜单),获取右键事件对象,来确定鼠标的点击位置,作为显示菜单的left和top值

编码实现

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script>

window.onload = function(){

var menu = document.getElementById('menu');

document.body.oncontextmenu = function(e){ // 自定义body元素的鼠标事件处理函数

var e = e || window.event;

e.preventDefault(); //阻止系统右键菜单 IE8-不支持

// 显示自定义的菜单调整位置

let scrollTop =

document.documentElement.scrollTop || document.body.scrollTop;// 获取垂直滚动条位置

let scrollLeft =

document.documentElement.scrollLeft || document.body.scrollLeft;// 获取水平滚动条位置

menu.style.display = 'block';

menu.style.left = e.clientX + scrollLeft + 'px';

menu.style.top = e.clientY + scrollTop + 'px';

}

// 鼠标点击其他位置时隐藏菜单

document.onclick = function(){

menu.style.display = 'none';

}

}

</script>

<style>

*{

margin: 0;

padding: 0;

}

p{

margin-top: 200px;

}

ul li{

list-style-type: none;

margin: 10px 0;

text-align: center;

}

#menu{

border:1px solid #ccc;

background: #eee;

position: absolute; // 设置菜单为绝对位置

width: 100px;

height: 120px;

display: none;

}

</style>

</head>

<body style="overflow:auto">

<div id="box" style="height:5000px; width:5000px">让body元素出现滚动条用的div</div>

<div id="menu">

<ul>

<li><a href="#">分享</a></li>

<li><a href="#">收藏</a></li>

<li><a href="#">举报</a></li>

</ul>

</div>

</body>

</html>

实现效果

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Python Python中的反射机制

    概念 借用java中的定义:在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法;对于任意一个对象,都能够调用它的任意一个方法和属性 modul...

    授客
  • Easyui 修改|新增jquery-easyui icon图标

    打开jquery-easyui-1.5.3\themes\icon.css文件,文件头部添加目标图标样式,例子:

    授客
  • Oracle 修改SYS、system用户密码

    SYS用户是Oracle中权限最高的用户,而SYSTEM是一个用于数据库管理的用户。在数据库安装完之后,应立即修改SYS,SYSTEM这两个用户的密码,以保证数...

    授客
  • k8s源码分析-----kube-proxy(1)Config

    第一时间获取文章,可以关注本人公众号 月牙寂道长 yueyajidaozhang

    月牙寂道长
  • 给新生成的节点(动态生成节点)绑定事件方法总结

    第一种 jquery写法 $('.father').on('click',',child',function(){}) $(document).on('cli...

    吴裕超
  • JS总结

    用户1112962
  • jQuery基础--插件

    官方API:http://api.jqueryui.com/category/all/

    eadela
  • Jq实现简单的选项卡功能

    申霖
  • 简单轮播图实现

    用户1749219
  • Debian 安装Cos migration

    https://cloud.tencent.com/document/product/436/10865#linux

    215431047

扫码关注云+社区

领取腾讯云代金券