子元素触发父元素的鼠标事件及上层元素遮挡下层元素的鼠标事件

背景介绍：使用 D3 绘制业务所需的展示图， 其中一个功能是实现在长方形框中添加文本内容（如图1所示），并且设置鼠标事件，当移入长方形区域时，显示一个弹出框展示详细内容（如图2所示)，移出后隐藏弹出框。

问题描述： 鼠标移入到长方形空白区域，事件正常执行，而当鼠标移动到text上则事件无法触发。

                                                         

          图1                                                  图2                                                                    图3

 

问题解决： 本博客中在使用D3绘制方形及文本时，通过定位的方式将文本移到方形中，故文本区域是方形区域的上层元素ÿ