CODEWITHSUNDEEP
javascriptsvgdom-events
Nadir Muzaffar
Nadir Muzaffar

Reputation: 4842

What is the behavior of click event bound on SVG group element yet triggered on child element and completed on another?

To make my question straightforward, here's an example: http://jsfiddle.net/542afcfg/1/

document.getElementById('parent').addEventListener('click', function (e) {
    alert('Clicked!');
});
<svg width="200" height="200">
    <g id="parent">
        <g id="child1">
            <circle r="20" cx="40" cy="80"></circle>
        </g>
        <g id="child2">
            <circle r="20" cx="40" cy="40"></circle>
        </g>
    </g>
</svg>

If you start by clicking on any given child circle, and release on the other, Chrome decides that it makes sense to fire the click event while Firefox and Safari do not.

I feel since the children are grouped by the g parent element, it should fire the click event.

Anyone know what the spec says?

Upvotes: 1

Views: 3215

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101820

The spec is easy to find. You can read it here.

"The click event occurs when the pointing device button is clicked over an element. A click is defined as a mousedown and mouseup over the same screen location."

Confirmed and filed as a bug in Chromium: https://code.google.com/p/chromium/issues/detail?id=424969

Upvotes: 2

Related Questions