javascript实现自定义右键菜单（绑定鼠标左右键）-Toy模板网

这篇具有很好参考价值的文章主要介绍了javascript实现自定义右键菜单（绑定鼠标左右键）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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';//添加到style
			button1.style.left=x+scrollleft+'px';//添加到style
			return 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>

如果我对你有帮助，请留下一个赞鼓励我一下吧文章来源地址https://www.toymoban.com/news/detail-483993.html

到了这里，关于javascript实现自定义右键菜单（绑定鼠标左右键）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

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