SVG in IE6/7/8, how to make the SVG element capture mouse event before the other HTML elements
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='heig开发者_开发知识库ht: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
加载中,请稍侯......
精彩评论