pointer-events test

HTML

<div id="foo"></div>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"  
  viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice"  
  style="width:100%; height:100%; position:absolute; top:0; left:0;">  
  <circle pointer-events="none" cx="50" cy="50" r="30" style="fill:red" />  
</svg>

CSS

#foo {
    width: 100px;
    height: 100px;
    background: red;
    /* pointer-events: none; */
}

JavaScript

$([
    document.getElementById('foo'),
    document.querySelector('circle')
]).on('click', function() {
    alert("pointer-events none doesn't work!");
});