一种实现svg自定义鼠标右键菜单的方法

【专利摘要】本发明公开了一种实现SVG自定义右键菜单的方法，包括下列步骤：(1)阻止默认的网页右键菜单行为，(2)创建自定义菜单，(3)显示自定义右键菜单，(4)隐藏自定义右键菜单。本发明方法具有浏览器兼容性，支持对SVG图形整体以及SVG图形中部分对象添加右键菜单。与现有技术相比，本发明具有以下优点：1、浏览器兼容性，支持InternetExplorer，googlechrome浏览器，firefox浏览器，Safari浏览器，opera浏览器，无需安装插件。2、支持对SVG图形整体以及SVG图形中部分对象添加右键菜单。

【专利说明】—种实现自定义鼠标右键菜单的方法

[0001]

【技术领域】

[0002]本发明涉及计算机领域，尤其涉及一种实现自定义右键菜单的方法。

【背景技术】

[0003]876 (3(^1^)16 ^601:01- '叩卜化8，可缩放矢量图形)是基于 XII (￡^1:6118113161犯^即匕叩皿阴，可扩展标记语言)用于描述二维矢量图形的一种图形格式。使用鼠标右键菜单对37(}进行操作可丰富对的交互操作。然而，37(}本身并不提供鼠标右键菜单，在37(}图形上点击鼠标右键出现的是浏览器提供的鼠标右键菜单。现有的右键重构方法通过在八(10136 8763.0 (八373)的脚本环境中重构菜单的内容和样式的来实现自定义右键菜单，仅针对安装了八如“ 876插件的浏览器，同时该方法只能对37(}图形整体添加右键菜单，而不能对37(}图形中的部分对象添加右键菜单。

【发明内容】

[0004]本发明主要是解决现有技术所存在的技术问题；提供了一种支持I社61116七

^00^16浏览器，丨丨1~6？0^浏览器，义；1^1~1浏览器，0^)61?浏览器，无需安装插件的实现3%自定义鼠标右键菜单的方法。

[0005]本发明还有一目的是解决现有技术所存在的技术问题；提供了一种持对37(}图形整体以及37(}图形中部分对象添加右键菜单的实现37(}自定义鼠标右键菜单的方法。

[0006]本发明的上述技术问题主要是通过下述技术方案得以解决的:

一种实现37(}自定义鼠标右键菜单的方法，其特征在于，包括以下步骤:

步骤1，阻止网页右键模块基于37(}脚本阻止默认的网页右键菜单行为，具体是，当触发客户端的右键菜单事件时，返回值。

[0007]步骤2，创建右键菜单模块利用预定义的矩形和文本创建自定义右键菜单，初始状态下，设置自定义右键菜单48让111#属性值定义为卜丨况的，并将自定义右键菜单叠加在37(}图形的最上层。

[0008]步骤3，显示模块设置自定义函数，并基于步骤2创建的自定义右键菜单根据鼠标的坐标和网页窗口计算当前自定义右键菜单坐标并显示自定义右键菜单；具体方法是:

显示模块绑定自定义函数至鼠标右键单击事件，鼠标右键单击事件目标源为37(}元素，显示模块首先判断鼠标按键是否为右键，若按键动作是右键，则获取鼠标当前位置坐标，计算当前自定义右键菜单坐标位置，通过改变组成自定义菜单的矩形、文本的X、1属性值使得自定义右键菜单左上角坐标与鼠标当前位置坐标相同，并将自定义右键菜单^18让111#属性值设置为718让16 ；若按键动作不为右键则不执行操作。

[0009]步骤4，隐藏菜单模块设置自定义函数隐藏自定义右键菜单，绑定该自定义函数至鼠标左键单击事件，当鼠标左键单击37(}图形上除自定义右键菜单外的其它地方时自定义右键菜单隐藏。鼠标左键单击事件目标源为除自定义右键菜单外的其他37(}图形，自定义函数通过将自定义右键菜单属性值设置为“111(1(1611”来实现右键菜单的隐藏。

[0010]因此,本发明具有如下优点:1.浏览器兼容性，支持1111:611161: 2耶101~61~，80006

浏览器，浏览器，浏览器，0？61^浏览器，无需安装插件；2.支持对

8^6图形整体以及37(}图形中部分对象添加右键菜单。

【专利附图】

【附图说明】

[0011]图1为本发明的方法流程示意示意图。

【具体实施方式】

[0012]下面通过实施例，并结合附图，对本发明的技术方案作进一步具体的说明。

[0013]实施例:

如图1所示，本发明包括如下步骤:

步骤1，阻止网页右键模块基于37(}脚本阻止默认的网页右键菜单行为，具体是，当触发客户端的右键菜单事件时，返回值。

[0014]步骤2，创建右键菜单模块利用预定义的矩形和文本创建自定义右键菜单，初始状态下，设置自定义右键菜单48让111#属性值定义为卜丨况的，并将自定义右键菜单叠加在37(}图形的最上层。

[0015]步骤3，显示模块设置自定义函数，并基于步骤2创建的自定义右键菜单根据鼠标的坐标和网页窗口计算当前自定义右键菜单坐标并显示自定义右键菜单；具体方法是:

显示模块绑定自定义函数至鼠标右键单击事件，鼠标右键单击事件目标源为元素，该元素可以是3%元素(〈^邑〉)，形状元素(矩形〈1~6。1:?、圆形〈011x16〉、椭圆〈61111386〉、线〈11116?、折线〈1301711116〉、多边形〈？0178011?、路径〈即访〉)，容器元素(〈^，显示模块首先判断鼠标按键是否为右键，若按键动作是右键，则获取鼠标当前位置坐标，计算当前自定义右键菜单坐标位置，通过改变组成自定义菜单的矩形、文本的X、7属性值使得自定义右键菜单左上角坐标与鼠标当前位置坐标相同，并将自定义右键菜单^18让111#属性值设置为718让16 ；若按键动作不为右键则不执行操作。

[0016]步骤4，隐藏菜单模块设置自定义函数隐藏自定义右键菜单，绑定该自定义函数至鼠标左键单击事件，当鼠标左键单击37(}图形上除自定义右键菜单外的其它地方时自定义右键菜单隐藏。鼠标左键单击事件目标源为除自定义右键菜单外的其他37(}图形，自定义函数通过将自定义右键菜单属性值设置为“111(1(1611”来实现右键菜单的隐藏。

[0017]本文中所描述的具体实施例仅仅是对本发明精神作举例说明。本发明所属【技术领域】的技术人员可以对所描述的具体实施例做各种各样的修改或补充或采用类似的方式替代，但并不会偏离本发明的精神或者超越所附权利要求书所定义的范围。

【权利要求】

1.一种实现SVG自定义鼠标右键菜单的方法，其特征在于，包括以下步骤: 步骤1，阻止网页右键模块基于SVG脚本阻止默认的网页右键菜单行为，具体是，当触发客户端的右键菜单事件时，返回false值； 步骤2，创建右键菜单模块利用SVG预定义的矩形和文本创建自定义右键菜单，初始状态下，设置自定义右键菜单visibility属性值定义为hidden,并将自定义右键菜单叠加在SVG图形的最上层； 步骤3，显示模块设置自定义函数，并基于步骤2创建的自定义右键菜单根据鼠标的坐标和网页窗口计算当前自定义右键菜单坐标并显示自定义右键菜单；具体方法是: 显示模块绑定自定义函数至鼠标右键单击事件，鼠标右键单击事件目标源为SVG元素，显示模块首先判断鼠标按键是否为右键，若按键动作是右键，则获取鼠标当前位置坐标，计算当前自定义右键菜单坐标位置，通过改变组成自定义菜单的矩形、文本的X、I属性值使得自定义右键菜单左上角坐标与鼠标当前位置坐标相同，并将自定义右键菜单visibility属性值设置为visible ;若按键动作不为右键则不执行操作； 步骤4，隐藏菜单模块设置自定义函数隐藏自定义右键菜单，绑定该自定义函数至鼠标左键单击事件，当鼠标左键单击SVG图形上除自定义右键菜单外的其它地方时自定义右键菜单隐藏；鼠标左键单击事件目标源为除自定义右键菜单外的其他SVG图形，自定义函数通过将自定义右键菜单“visibility”属性值设置为“hidden”来实现右键菜单的隐藏。

【文档编号】G06F3/0487GK104461260SQ201410694282

【公开日】2015年3月25日 申请日期:2014年11月27日 优先权日:2014年11月27日

【发明者】艾廷华, 周梦杰, 田晶, 刘耀林, 赵荣, 熊富全 申请人:武汉大学