同一级别元素上的 Javascript 事件

Question

我在一个组中有两个 SVG 元素。两者都属于对象模型中的单独范围。 现在，我想同时捕获两个元素上的鼠标事件。

问题是我只在最上面的元素而不是下面的元素中获取事件。 由于两个元素处于同一级别，我无法使用捕获和气泡。

下面是我的代码更简单的方式：

http://jsfiddle.net/zLx15u8c/10/

var parent = document.getElementById( 'myGrp' );
var telement = document.getElementById( 'telement' );

  var polyConfig = {
      'points': '0,0 500,500',
      'id': 'pLine',
      'fill': 'red',
      'stroke': 'black',
      'stroke-width': 2,
      'appendTo': parent
  };

  var pLine = CreateSvgElement( 'polyline', polyConfig );
  var prect = CreateSvgElement( 'rect',
                                    {
                                        'x': 0,
                                        'y': 0,
                                        'width': 200,
                                        'height': 200,
                                        'stroke': 'black',
                                        'fill-opacity': 0,
                                        'appendTo': parent
                                    } );
prect.addEventListener( 'mousemove', OnRectMouseMove,false );
prect.addEventListener( 'mousedown', OnRectMouseDown, false );

pLine.addEventListener( 'mousemove', OnMouseMove );
pLine.addEventListener( 'mousedown', OnMouseDown );

在示例中，我想在矩形内在线捕获事件。

Answer 1

通过先创建多边形，然后创建折线，我得到了预期的输出：

http://jsfiddle.net/Lrs6ngm5/

var prect = CreateSvgElement('rect', {
    'x': 0,
        'y': 0,
        'width': 200,
        'height': 200,
        'stroke': 'black',
        'fill-opacity': 0,
        'appendTo': parent
});
var polyConfig = {
    'points': '0,0 500,500',
        'id': 'pLine',
        'fill': 'red',
        'stroke': 'red',
        'stroke-width': 2,
        'appendTo': parent
};

var pLine = CreateSvgElement('polyline', polyConfig);