首页 > 其他分享 >右击canvas画布时,显示自定义菜单

右击canvas画布时,显示自定义菜单

时间:2024-04-11 17:15:35浏览次数:399  
标签:右击 clickRightMenu canvas 菜单 自定义 style clickRightHtml event

<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>
<--可自定义为按钮增加点击事件函数-->


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;//屏蔽浏览器自带的右键菜单
};

  

标签:右击,clickRightMenu,canvas,菜单,自定义,style,clickRightHtml,event
From: https://www.cnblogs.com/zhouyuqiu/p/18129613

相关文章

  • directive自定义指令把文案转html+输入功能
    文案: "甲方(贷款人):全称:$var<text_aasdrup06rc00>法定代表人/负责人:$var<text_k2s9cffkhls00>地址:$var<text_6356yvx7oag00>\n\n乙方(借款人):全称/姓名:(变量-姓名),身份证号码/统一社会信用代码:(变量-身份证)地址:$var<text_1g9bed61qp7k0>\n\n鉴于:\n\n甲方与乙方于 $var<date_3ld......
  • 自定义校验(这里是Validation)
    1.自定义注解Statepackagecom.itheima.anno;importcom.itheima.Validator.StateValidator;importjakarta.validation.Constraint;importjakarta.validation.Payload;importjava.lang.annotation.*;@Documented//元注解@Target(ElementType.FIELD)@Retention(R......
  • Elasticsearch 创建自定义分析器(4)
    一.自定义分析器当内置分析器不能满足时,可以创建一个自定义分析器,自定义分析器(analyzer)由:1)0或多个charactcrfilter字符过滤器2) 1个tokenizer分词器,将文本切分为分词  3)0或多个tokenfilter令牌过滤器,是属于分词后再过......
  • Django ModelSerializer 中如何实现自定义验证
    随着Web开发的日益复杂化,对数据验证的需求也日益增加。DjangoRESTframework提供了一套强大的、灵活的验证系统,帮助开发者轻松处理各种复杂情况。本文将重点探讨DjangoModelSerializer中如何实现自定义验证。1.简介DjangoModelSerializer不仅简化了序列化过程,还内建了......
  • Spring Actuator 自定义HealthIndicator
    在SpringActuator实现自定义端点中案例的的基础上,实现自定义HealthIndicator。为什么还要实现HealthIndicator呢?SpringActuator实现自定义端点中案例只是对status的数据进行了监控,至于这个数据是否健康并没有进行评价。实现HealthIndicator就是对自定义监控数据的健康状态根......
  • django simpleui 的list_display添加自定义列、显示图片 及alert弹窗的设置方法
    参考djangosimpleui的list_display添加自定义列、显示图片及alert弹窗的设置方法-CSDN博客环境:python:3.8.xDjango:3.2.xDjango-simpleui:2021.x先定义下模型#models.pyclassDog(models.Model):name=models.CharField(max_length=15,verbose_name='小狗名字')......
  • Obsidian自定义代码块样式成Typora
    先来效果图修改前效果:修改后效果:编辑模式:预览模式:两种模式的表现间距略有不同,但不影响.添加自定义css样式.markdown-source-view.mod-cm6.cm-content>.HyperMD-codeblock{border-width:01px01px;border-style:solid;border-color:#E7EAE......
  • 【QT入门】Qt自定义控件与样式设计之QPushButton常用qss
    往期回顾【QT入门】Qt自定义控件与样式设计之qss介绍(Qtstylesheet)-CSDN博客【QT入门】Qt自定义控件与样式设计之qss选择器-CSDN博客【QT入门】Qt自定义控件与样式设计之QLineEdit的qss使用-CSDN博客 【QT入门】Qt自定义控件与样式设计之QPushButton常用qss这里我......
  • 【QT入门】 Qt自定义控件与样式设计之QCheckBox qss实现按钮开关
    往期回顾【QT入门】Qt自定义控件与样式设计之QPushButton常用qss-CSDN博客【QT入门】Qt自定义控件与样式设计之QPushButton实现鼠标悬浮按钮弹出对话框-CSDN博客【QT入门】Qt自定义控件与样式设计之QComboBox样式表介绍-CSDN博客 【QT入门】Qt自定义控件与样式设计之......
  • 自定义Python实用函数-返回指定目录及其子目录和指定文件扩展名的文件清单列表
    importosdefget_files(file_path,image_types_set=()):"""返回指定目录及其子目录下、指定文件扩展名的文件清单列表。若image_types_set参数为空,则返回图片文件清单列表。若image_types_set参数为['.*'],则返回所有文件清单列表。"""filenames......