javascript实现自定义右键菜单

思路

思路：
1.绑定右键函数。
2.获取鼠标右键按下位置的x坐标（到左面的距离），y坐标（到上面的距离）。
3.获取滚动条向下滚动距离，获取滚动条向左滚动距离
4.最后+‘px’,补全单位，添加到元素style属性，将元素移动到鼠标右键位置

1绑定右键函数

<script>
document.oncontextmenu=function(o)  //绑定右键
{}

2.获取鼠标右键按下位置的x坐标（到左面的距离），y坐标（到上面的距离）。

var x=o.clientX;//左距离
var y=o.clientY;//右距离

3.获取滚动条向下滚动距离，获取滚动条向左滚动距离

let scrolltop=document.documentElement.scrollTop || document.body.scrollTop;//滚动条向下滚动距离
let scrollleft=document.documentElement.scrollLeft ||document.body.scrollLeft;//滚动条向左滚动距离

4.最后+‘px’,补全单位，添加到元素style属性里。

var button1=document.getElementById("1");
button1.style.left=x+scrollleft+'px';
button1.style.top=y+scrolltop+'px';

5.完整代码：

<button type="button" id="1" style="position: absolute;z-index: 1;">上一页</button>
<script>document.oncontextmenu=function(o)//右键{var x=o.clientX;//左距离var y=o.clientY;//右距离var button1=document.getElementById("1");let scrolltop=document.documentElement.scrollTop || document.body.scrollTop;//滚动条向下滚动距离let scrollleft=document.documentElement.scrollLeft || document.body.scrollLeft;//滚动条向左滚动距离button1.style.top=y+scrolltop+'px';//添加到stylebutton1.style.left=x+scrollleft+'px';//添加到stylereturn false;//这一步非常重要，关闭浏览器默认右键菜单}
</script>

6.注意点

重要的事情说三遍：
代码最后的 return false; 关闭浏览器默认右键菜单，非常重要！
代码最后的 return false; 非常重要！！
代码最后的 return false; 非常重要！！！

扩展：绑定左键

目的：获取左键按下的元素，获取其 id

<script>document.onclick=function(t){ //绑定左键if(t.target.id=="1")//获取并判断id{console.log("button1 is click！");}}</script>

如果我对你有帮助，请留下一个赞鼓励我一下吧

javascript实现自定义右键菜单（绑定鼠标左右键）相关推荐

java 左右键_js 区分鼠标左右键点击
oncontextmenu 是右键事件但是滚轮事件并没有获取到, 使用vue可以用middle获取 Title .box { width: 200px; height: 200px; backgr ...
网站禁用鼠标右键php代码,JavaScript_网页禁用右键菜单和鼠标拖动选择方法小结，一、禁止鼠标右键菜单：- phpStudy...
网页禁用右键菜单和鼠标拖动选择方法小结一.禁止鼠标右键菜单: 有如下两种方法来禁止鼠标右键 1.在HTML元素的Body标签中加入Javascript事件句柄,代码如下: 说明:您也可以在网页指定的 ...
php左键点改成左键点,window_win10怎么将鼠标左键设置为主键?win10鼠标左右键互换的技巧，当我们的鼠标使用一段时间之 - phpStudy...
win10怎么将鼠标左键设置为主键?win10鼠标左右键互换的技巧当我们的鼠标使用一段时间之后,会由于左键经常按压而导致老化或者损坏,而对于突然间的损坏,又没有其他可以替代的鼠标时候,就需要对鼠标左 ...
转载：注册表修改--鼠标左右键菜单篇
注册表修改--鼠标左右键菜单篇加Apploc到右键中去: [HKEY_CLASSES_ROOT\exefile\shell\Apploc\command] 再修改其中的默认值为C:\windows\ ...
iMouse - 快速切换鼠标左右键
(此Blog是iMouse软件的官网) [名称]:iMouse [版本]:v1.2 (v1.2是首个公开发布版本,也是最新版,之前版本没有对外发布) [时间]:2012-01-06 [关键词]:腱鞘炎 ...
linux下模仿用户左键,linux 鼠标左右键互换实现代码
linux鼠标左右键互换脚本,作者今天, 使用 GNOME, 发现 Linux 也需要这些工具之一, 所以有了这个脚本.非常简单好用. lr="l" for id in `xinp ...
用C#实现鼠标左右键的切换
转载地址:http://www.51test.net/show.asp?id=283640&Page=1#top 1. SwapMouseButton 根据MSDN所述,可以通过调用SwapM ...
戴记严选GM3323D 鼠标左右键失效解决办法
戴记严选 GM3323D 鼠标左右键失效原因分析 GM3323D软件下载当你下载了驱动了并且使用2.4G连接鼠标时,当你修改RGB设置有几率导致左右键失效请尝试用触摸板或者其他鼠标重新点击修改R ...
C#Winform中DataGridView控件根据鼠标左右键获取单元格值或者行列
有多种方法可以获取单元格的值或者行列,此处选用了两种方式去获取分别用了CurrentCell方法和Rows[].Cells[]的方法去获取行列值鼠标左键获取单独行列值此处获取左键行列值的触发条件是 ...

javascript实现自定义右键菜单（绑定鼠标左右键）

文章目录