views:

41

answers:

0

I embed a SVG(with adobe svg viewer) in html and browse in IE, and I add mouse listener on the svg element, but I always catch the event after other HTML elements, how to make the SVG element capture mouse event at first in IE, so that I can decide whether to cancel the event

<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>SVG in IE </title>
    <script type="text/javascript"><!--
    // <![CDATA[
        function init(){
            var canvas = document.getElementById('canvas');
            var embedNode = document.getElementById('embedNode');
            var svg = embedNode.window.document.documentElement;

            svg.addEventListener('mousedown', function(){
                trace('mouse down on svg, how to make the SVG element capture mouse event before the other HTML elements');
            }, false);//The third parameter can only be 'false'

            embedNode.onmousedown = function(){
                trace('mouse down on embedNode');
            };

            canvas.onmousedown = function(){
                trace('mouse down on canvas');
            };

        }

        function trace(text){
            var logger = document.getElementById('logger');
            logger.value += text + '\n';
        }
    // ]]>--></script>
    </head>
    <body onload='init();'>
    <textarea id='logger' style='height:200px;'></textarea>
    <div id='canvas' style='width:300px; height:400px;' >
        <embed id='embedNode' onload = 'initEvents();' src="aaa.svg" width="100%" height="100%" type="image/svg+xml" wmode='transparent' pluginspage="http://www.adobe.com/svg/viewer/install/" />
    </div>
    </body>
    </html>

aaa.svg

<?xml version='1.0' encoding='UTF-8'?>
<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' >
    <rect x='0' y='0' width = '500px' height='500px' fill='#EEEEEE'/>
</svg>

click at the svg and the svg element capture event at last after other HTML elements:

mouse down on embedNode
mouse down on canvas
mouse down on svg, how to make the SVG element capture mouse event before the other HTML elements