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

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

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

                                                         

          图1                                                  图2                                                                    图3

 

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

                   # 上层元素遮挡下层元素鼠标事件问题

                      设置上层元素的 CSS 样式，实现上层元素穿透的效果，解决本博客中的问题；

                      pointer-events: none;

 

                 （延伸） 若文本区域和方块区域属于父子标签的关系时；

                  # 子元素遮挡父元素的鼠标事件问题

                     设置终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播: 

                      e.stopPropagation();

 

    参考博客：https://blog.csdn.net/qq_41139830/article/details/82860616

                      https://blog.csdn.net/qq_31847185/article/details/82775142

   如有任何问题，欢迎指正讨论，谢谢！