SVGのevent bubblingについて調べてみた #HTML5

HTMLは子から親にイベントが連鎖したり、重なりがあった場合、下の要素にもイベントが連鎖したりする。
w3cとかみてもそれらしい記述がないのでSVGのイベント連鎖はどうなるのかしらべてみた。

結論を書くとこんな感じ。

イベントが発火した要素がgroup要素にはいっていた場合、その要素とgroup要素が発火します。※groupにはいっている他の要素は影響うけけない。
要素が２つ重なっていた場合は上にある要素だけが発火する。下側の要素には伝わらない。
svg要素内で発火したイベントはDOM上の親要素へと伝搬していく。

実験したコード

<header>
　　<h1>バブリング調査</h1>
</header>

<body onclick="alert('bodyでーす');">
    <div id='svg-container' onclick="alert('divでーす。');" height="100%">
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
            <g onclick="alert('赤青グループです。')">
                <rect x="50" y="20" width="150" height="50" style="fill:blue;" onclick="alert('青です。');"/>
                <rect x="70" y="40" width="150" height="50" style="fill:red;" onclick="alert('赤です。');"/>
            </g>
            <g onclick="alert('黄緑グループです。')">
                <rect x="40" y="80" width="150" height="50" style="fill:yellow;" onclick="alert('黄です。');"/>
                <rect x="60" y="110" width="150" height="50" style="fill:green;" onclick="alert('緑です');"/>
            </g>            
        </svg>
    </div>
</body>

demo

ほとんどイベント伝搬という考え方はなさうです。

HighChartをさわっているとイベント伝搬しているかのような挙動をするので
気になって中みてみたらJavaScriptで別要素に伝搬させていました。