在叠加的div和svg上传播事件

Question

我在另一个div上叠加了div标签。我想将在顶部div上发生的事件传播到底部div。在顶层设置“pointer-events：none”允许底层触发事件，但我不希望在顶层忽略某些鼠标事件。有什么解决方案可以完成底层div来触发顶层发生的事件？

<div>
  <div id="top" class="layers"><span>top</span></div>
  <div id="bottom2" class="layers"><object data="https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg" type="image/svg+xml" width="100px" height="100px"></object></div>
</div>

<script>
var bottom2 = document.getElementById('bottom2');
  bottom2.addEventListener('mouseover', function(){
    console.log('mouseover bottom');
  });

var top = document.getElementById('top').addEventListener('mouseover', function(e){
    console.log('mouseover top');
    bottom2.dispatchEvent(e);
});
</script>

http://jsfiddle.net/katakuri/nwqhm1dn/5/

谢谢，