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

摘要

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

主权项

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