Should the base svg tag receive events?

This is in regards to the following ongoing discussion on the whatwg specs mailing list:
http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2010-August/027718.html

The question is regarding the handling of events for the base svg tag.

Details:
As best I can understand the SVG specs, only graphical elements can receive event triggers (thus g, svg, etc... cannot trigger an event). However, if I setup a stand-alone svg file or if I add an svg tag to an html file, then the base svg element often triggers an event.

Note: actual results varies in each browser for html pages.
Based on the limited info in the specs (which says events only affect graphical elements), it would seem like the event should not trigger on the base/top-most svg tag.

Am I understanding the specs correctly (and the browsers are doing it wrong) or is there more to it?




P.S. If it helps, here's testcode that I've used ... that will show which items trigger events....
---------
script.js
---------
function setup() {
addEventToAll(document, "mousedown", collect)
document.addEventListener("mouseup",showResult, false)
}
RESULT = ""
function collect(Event) {
id = ""
if ( Event.currentTarget.hasAttribute("id")) {
id = "["+Event.currentTarget.getAttribute("id")+"]"
}
RESULT += "Started: "+Event.target+" during phase "+Event.eventPhase+" @ "+Event.currentTarget+id+"\n"
}
function showResult() {
alert(RESULT)
RESULT = ""
}

/* Credits/Copyright/Reference:
-Raw Javascript (DOM)-
http://www.w3.org/TR/DOM-Level-2-Core/
http://www.w3.org/TR/DOM-Level-2-Core/ecma-script-binding.html (quick reference of all JS DOM features)
http://www.w3.org/TR/DOM-Level-2-Events/
http://www.w3.org/TR/DOM-Level-2-Events/ecma-script-binding.html (JS Events Reference)
-Raw Javascript (language)-
http://www.ecma-international.org/publications/standards/Ecma-262.htm
http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-262.pdf (direct link)
*/
addEventToAll = function(node, type, func) {
if(typeof(node) == typeof({})) {
if(node.nodeType == 1 || node.nodeType == 9) {
node.addEventListener(type, func, false)
}
if(node.hasChildNodes) {
for (key in node.childNodes) {
childNode = node.childNodes[key]
addEventToAll(childNode, type, func)
}
}
}
}
--------
test.svg
--------
<?xml version="1.0" ?>
<!DOCTYPE SVG PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Credits/Copyright/Reference: http://www.w3.org/TR/SVG11/ & http://www.w3.org/TR/xml/ & http://www.w3.org/TR/xlink/-->
<svg id="base_svg" style="position:absolute; top:-100px; left:-100px; width:500px; height:500px; border:1px solid black;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload="setup()">
<script xlink:href="script.js"/>
<path d="M 250,250 l 50,0 0,50 -50,0 z" fill="black" stroke="red" stroke-width="1" />
<svg x="300" y="300" width="500" height="500">
<path d="M 10,10 l 50,0 0,50 -50,0 z" fill="grey" stroke="red" stroke-width="1" />
<path d="M 0,0 l 300,0 0,300 -300,0 z" fill="none" stroke="red" stroke-width="2" />
</svg>

</svg>
--------
test.xhtml
--------
<!DOCTYPE HTML>
<!-- Credits/Copyright/Reference: http://www.whatwg.org/specs/web-apps/current-work/ -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div style="position:absolute; top:20px; left:20px; width:100px; height:100px; background-color:red; z-index:10;">
..
</div>
<div style="position:absolute; top:120px; left:120px; width:100px; height:100px; background-color:green; z-index:20;">
<!-- Credits/Copyright/Reference: http://www.w3.org/TR/SVG11/ & http://www.w3.org/TR/xml/ & http://www.w3.org/TR/xlink/-->
<svg id="base_svg" style="position:absolute; top:-100px; left:-100px; width:500px; height:500px; border:1px solid black;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload="setup()">
<script xlink:href="script.js"/>
<path d="M 250,250 l 50,0 0,50 -50,0 z" fill="black" stroke="red" stroke-width="1" />
<svg x="300" y="300" width="500" height="500">
<path d="M 10,10 l 50,0 0,50 -50,0 z" fill="grey" stroke="red" stroke-width="1" />
<path d="M 0,0 l 300,0 0,300 -300,0 z" fill="none" stroke="red" stroke-width="2" />
</svg>

</svg>
..
</div>
</body>
</html>

Received on Wednesday, 11 August 2010 18:56:43 UTC