Question

我在一个组中有2个svg元素。两者都属于对象模型中的单独范围。现在，我希望平行捕获两个元素上的鼠标事件。

问题是我只将事件发送到最顶层的元素而不是下面的元素。由于这两个元素处于同一级别，我无法使用捕获和冒泡。

以下更简单的方法是我的代码：

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 );

在示例中，我想在rect中捕获事件。

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);

同一级别元素上的Javascript事件

1 个答案: