zoukankan      html  css  js  c++  java
  • 屏蔽SVG右键菜单


    两个文件放在同一目录
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    svg主文件
    tt.svg
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    <?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000802//EN" 
    "http://www.w3.org/TR/2000/CR-SVG-20000802/DTD/svg-20000802.dtd">

    <svg width="600" height="400">
    <script type="text/ecmascript">
    <![CDATA[

    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;
    }
    ]]> </script> 
    <g onmousedown="onmousedown(evt)">
    <rect id="a" x="2cm" y="1cm" width="6cm" height="3cm" fill="green" stroke="blue" stroke-width="5"/>
    <text id="b" x="5cm" y="5cm" style="font-family:Verdana; font-size:16pt; fill:blue">
    Hello, SVGViewer!
    </text>
    </g>
    </svg>
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    定义右建菜单的xml文件
    yy.xml
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    <?xml version="1.0" encoding="UTF-8"?>
    <menu id="myCustomMenu">
     
     <item action="ZoomIn" id="ZoomIn">ZoomIn</item>
     <item action="ZoomOut" id="ZoomOut">ZoomOut</item>
     <item action="OriginalView" id="OriginalView">OriginalView</item>
     <separator/>
     <item action="Find" id="Find">Find</item>
     <item action="Copy" id="Copy">Copy</item>
     <separator/>
               <item onactivate="showAlert(evt)">ShowAlert</item>
     
    </menu>



    <svg>
    <defs>
    <menu id='menu1' >
    <header>Menu utilisateur</header>
    <item id='Menu1.1' onactivate='Toto()'>工作1</item>
    <item id='Menu1.2' onactivate='Titi(2)'>工作2</item>
    <item id='Menu2.0'/>
    <item id='Menu2.1' action="ZoomIn"> 缩小 </item>
    <item id='Menu2.2' action='ViewSource'>浏览源代码</item>
    </menu>
    </defs>
    <script>
    <![CDATA[
    var svgdoc = evt.getTarget().getOwnerDocument();
    var newMenuRoot=parseXML(printNode(svgdoc.getElementById('menu1')),contextMenu);
    contextMenu.replaceChild(newMenuRoot,contextMenu.firstChild);
    function Toto()
    {
    alert('你点的是工作1')
    }
    function Titi(strParam)
    {
    alert('你点的是工作2,而且还传递了一个参数: ' + strParam)
    }
    ]]>
    </script>
    </svg>

  • 相关阅读:
    JavaScript 中document.write() 详细用法介绍
    教你怎么用JavaScript检测当前浏览器是无头浏览器
    JavaScript网页截屏方法,你get到了嘛?
    新手小白该怎么学习前端?附学习路线和资料
    实现微前端需要了解的 Vue Genesis 渲染器
    前端新人关注的Web前端饱和性分析?前端面试必知必会的十点!
    这个前端竟然用动态规划写瀑布流布局?给我打死他!
    Kubernetes之Ingress+Traefik
    MySQL语法大全
    PPTP服务器
  • 原文地址:https://www.cnblogs.com/frogbag/p/345697.html
Copyright © 2011-2022 走看看