svg 右键意见删除cvs_屏蔽SVG右键菜单

两个文件放在同一目录

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

svg主文件

tt.svg

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

svg PUBLIC "-//W3C//DTD SVG 20000802//EN"

"http://www.w3.org/TR/2000/CR-SVG-20000802/DTD/svg-20000802.dtd">

getURL("yy.xml", fileLoaded);

function fileLoaded (data) {

var msg = '';

if(data.success) {

var newMenuRoot=parseXML(data.content,contextMenu);

contextMenu.replaceChild(newMenuRoot,contextMenu.getDocumentElement());

}

}

var target;

function onmousedown(evt){

if(evt.button==2) target=evt.getTarget();

}

function showAlert(evt){

if(target!=null)

{

alert(target.getAttribute("id"));

}

target=null;

<
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在SVG元素上设置菜单,你可以使用以下步骤: 1. 创建一个菜单元素。使用SVG的`<g>`元素或者其他适合你的需求的元素来创建一个菜单容器。 ```html <svg> <g id="contextMenu" style="display: none;"> <!-- 在这里添加菜单的选项 --> </g> <!-- 在这里添加其他的SVG元素 --> </svg> ``` 2. 监听点击事件。使用SVG的`oncontextmenu`事件监听点击事件,并阻止默认的菜单显示。 ```javascript var svg = document.querySelector('svg'); svg.oncontextmenu = function(event) { event.preventDefault(); // 在这里显示自定义的菜单 var contextMenu = document.getElementById('contextMenu'); contextMenu.style.display = 'block'; contextMenu.style.left = event.pageX + 'px'; contextMenu.style.top = event.pageY + 'px'; } ``` 3. 添加菜单选项。在菜单容器中添加所需的选项,可以使用SVG的`<rect>`、`<text>`和其他元素来创建菜单选项。 ```html <svg> <g id="contextMenu" style="display: none;"> <rect x="0" y="0" width="100" height="30" fill="gray"></rect> <text x="10" y="20" fill="white">菜单选项1</text> <!-- 添加其他的菜单选项 --> </g> <!-- 在这里添加其他的SVG元素 --> </svg> ``` 4. 监听点击事件以隐藏菜单。当用户点击菜单选项或者点击其他地方时,隐藏菜单。 ```javascript document.addEventListener('click', function(event) { var contextMenu = document.getElementById('contextMenu'); contextMenu.style.display = 'none'; }); ``` 这样就可以在SVG元素上设置一个简单的菜单了。你可以根据需要进行进一步的样式和功能定制。请注意,以上代码仅为示例,具体实现可能需要根据你的应用程序进行适当调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值