对于zrender绘制的元素，如何让一个元素不响应事件类似于pointer-events: none 的效果？

Question

如何让上层的元素不响应鼠标事件，只触发下层的节点事件，文档里找半天没找到描述

  sourceData.rect.forEach(node => {
                let rect = new zrender.Rect({
                    id: node.shape.id,
                    shape: {
                        x: node.shape.x,
                        y: node.shape.y,
                        width: node.shape.width,
                        height: node.shape.height,
                    },
                    style: {
                        stroke: node.shape.stroke,
                        strokeWidth: node.shape.strokeWidth,
                        fill: 'red',
                        pointerEvents: 'none'
                    }
                });
                group.add(rect);

            })

Answer 1

一直都是用的 ECharts 没有研究过具体实现的 ZRender 这个库。

如果可以给元素设置 HTML 属性的话，可以考虑使用 inert 这个HTML属性，具体使用方法可以看张鑫旭大佬的这篇文章 👉 告别pointer-events:none使用HTML inert属性真正禁用

但是感觉比较困难，所以简单去翻了一下开发文档。感觉可以通过配置 silent 属性来让元素不响应鼠标事件。
但是可能会让后代元素也不响应鼠标事件，如果出现这种情况的话单独给后代设置一下 silent: false 可能可以避免。