如何在canvas画布上自定义鼠标右键菜单内容？

用户大大提了一个需求，想要在画布上能够右键快捷点击使用某个功能，小菜鸟肯定要满足啊（委屈脸），然后靠着强大的各路神仙，写下了如下代码，终于实现了，为自己放个烟花~~~不喜勿喷哦~

1.自定义鼠标右键菜单html，默认不显示，display: none;

<style>.clickRightMenu{width: 110px;background-color: #fff;font-size: 12px;position: absolute;text-align: left;padding: 2px 0;border:1px solid #ccc;display: none;z-index: 100;}.clickRightMenu li{list-style: none;line-height: 20px;padding-left: 25px;}.clickRightMenu li:hover{background-color: #dcdcdc;cursor: pointer;}
</style>
<ul class="clickRightMenu" id="clickRightMenu"><li>保存</li><li>取消</li>
</ul>
<canvas id="canvasId" width="400" height="400" style="border: 1px solid #ccc;"></canvas>
<--可自定义为按钮增加点击事件函数-->

2.使用oncontextmenu 方法，识别鼠标右键点击，通过display来控制右键菜单的显隐

var clickRightHtml = document.getElementById("clickRightMenu");
var canvas = document.getElementById("canvasId");
clickRightHtml.style.display = "none";//每次右键都要把之前显示的菜单隐藏哦
canvas.oncontextmenu = function(event){var event = event || window.event;clickRightHtml.style.display = "block";clickRightHtml.style.left = event.clientX + "px";clickRightHtml.style.top = event.clientY + "px";return false;//屏蔽浏览器自带的右键菜单
};

如何在canvas画布上自定义鼠标右键菜单内容？相关推荐

html修改鼠标右键,电脑鼠标右键菜单内容怎么修改设置
其实有时需要到一些操作,我们可能对鼠标右键菜单进行设置,下面是学习啦小编为大家介绍电脑鼠标右键菜单内容的修改设置方法,欢迎大家阅读. 电脑鼠标右键菜单内容的修改设置方法方法一.使用工具软件来设置,简 ...
Leaflet中使用Leaflet.contextmenu插件实现地图上添加鼠标右键菜单
场景 Leaflet快速入门与加载OSM显示地图: Leaflet快速入门与加载OSM显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客在上面的基础上,怎样使用Leaflet.co ...
JQuery模拟网页中自定义鼠标右键菜单
题外话.......最近在开发一个网站项目的时候,需要用到网页自定义右键菜单,在网上看了各路前辈大神的操作,头晕目眩,为了达到目的,突然灵机一动,于是便有了这篇文章. 先放个效果图(沾沾自喜,大神勿喷 ...
openlayer右键菜单_使用OpenLayers3 添加地图鼠标右键菜单
添加右键菜单,首先我们要监听鼠标右键点击的操作,我们知道鼠标右键事件名是 contextmenu,当鼠标在 html 元素之上,点击鼠标右键,便会触发 contextmenu 事件,在 context ...
硬件测试软件桌面鼠标右键老转,去掉桌面鼠标右键菜单中显卡选项的3种方法(适用常见显卡)...
只要我们更新过显卡驱动,或者你的现在的系统是出厂预装的,鼠标右键菜单中会有启动显卡控制中心选项.如:如果你是ATI显卡,右键菜单中便会有AMD VISION Engine Control Center ...
Flex自定义鼠标右键
这里写了一个简单的自定义鼠标右键,代码不难,请看注释其它的请大家参看官方文档 ContextMenu类 ContextMenuItem类源码: <?xml version=&q ...
Openlayers + Vue 实现自定义鼠标右键为改变视图角度事件
Openlayers + Vue 实现自定义鼠标右键为改变视图角度事件效果: 持续按下鼠标右键再拖动鼠标可以实现变换视图的角度 (openlayers的样式被我改了一下,看上去有点像ArcGIS A ...
稳扎稳打Silverlight(29) - 2.0Tip/Trick之Cookie, 自定义字体, 为程序传递参数, 自定义鼠标右键...
[索引页] [源码下载] 稳扎稳打Silverlight(29) - 2.0Tip/Trick之Cookie, 自定义字体, 为程序传递参数, 自定义鼠标右键, 程序常用配置参数作者:webabcd ...
html 元素允许右键,JavaScript 自定义html元素鼠标右键菜单功能
自定义html元素鼠标右键菜单实现思路在触发contextmenu事件时,取消默认行为(也就是阻止浏览器显示自带的菜单),获取右键事件对象,来确定鼠标的点击位置,作为显示菜单的left和top值 ...

如何在canvas画布上自定义鼠标右键菜单内容？

如何在canvas画布上自定义鼠标右键菜单内容？相关推荐

最新文章

热门文章