d3js鼠標移動事件不冒泡

Question

我具有類似於下面的SVG結構：

<svg> 
    <g id="main-group"> 
    ... 
     <rect id="event-rect"></rect> 
    </g> 
</svg> 

和我已附加相同的事件到＃事件RECT和＃主族

d3.select('#event-rect').on('mousemove', clb); 
d3.select('#main-group').on('mousemove', clb2); 

這裏的問題是第一個clb被觸發，而父節點（即＃main-group）的事件偵聽器不是。

爲什麼事件冒泡階段不在這裏工作？

使用實際的代碼是：

d3.select('#event-rect').on('mousedown', mousedown); 
d3.select('#event-rect').on('mousemove', mousemove); 
d3.select('#event-rect').on('mouseup', mouseup); 

然後在另一個模塊附上同一組中的事件：

d3.select('#main-group').on('mousedown', dragStart); 
d3.select('#main-group').on('mousemove', mousemove); 
d3.select('#main-group').on('mouseup', dragEnd); 

所有的回調被調用，除了在dragstart。我對我沒有任何意義

Answer 1

如果元素的尺寸相同，則g元素將被rect遮蔽。取決於你想要做什麼，有幾個選項。

• 你可以增加，使得當鼠標剛剛離開rect該事件被觸發g元素的大小。
• 您可以完全刪除g元素的偵聽器，並在rect的處理程序中執行其操作。
• 同樣，您可以從rect元素中刪除偵聽器，並處理g元素的偵聽器中的所有內容。