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


To sum things up, 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 standalong svg file or if I add an svg tag to an html file, then I noticed that the base svg element often triggers an event even though it is an invisible, non-graphical element.

Technically, only Firefox triggers for the base svg when you include it in an html page.
However, most or all browers trigger on the base svg tag when it is a standalone document.
 
 
Based on the limited info in the specs (which says events only affect graphical elements), it would seem like the event should not trigger even on the base/top-most svg tag.
 
 
I don't suppose someone here could clear things up? :)
 
 
 
 
 
 
 
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