Google Orgchart 中的事件监听器，如果单击节点中的链接则忽略选择事件

Question

我已经成功实现了 Google Orgchart 的一个版本，该版本允许在每个节点选择上向下钻取和刷新图表。但是，我在第一级之后的每个节点中嵌入了一些补充链接，并且我想防止用户单击任一链接时触发图表的向下钻取“刷新”。

有没有办法防止在这些情况下触发选择事件？

这是监听器的代码：

google.visualization.events.addListener(chart, 'select', function () {
var selection = chart.getSelection();
if (selection.length > 0 && data.getValue(selection[0].row, 0) != '10021917') {
mgrval = $('#managerid').text();
ldrval = $('#leaderid').text();
GetItemsLT(data.getValue(selection[0].row, 0),mgrval, ldrval);
}
});   

这是节点中的一个示例（所有节点都具有通用的“hrdata”类）：

<a href="https://browse.mycompany.com/detail.jsp?detail=less&amp;u=1061082" 
target="_blank"><img class="hrdata" src="https://kenvue.sharepoint.com/teams/nchc- 
compliance/officers/images/keds.png" height="50%" width="50%"></a>

Answer 1

为了防止单击节点内的链接时触发图表的“选择”事件，您可以在单击链接时停止事件传播。

• 单击节点内的链接（具有“hrdata”类）时停止事件传播，以防止触发组织结构图的“select”事件。

document.addEventListener('click', function (event) {
    if (event.target.closest('.hrdata')) {
        event.stopPropagation();
    }
});

google.visualization.events.addListener(chart, 'select', function () {
    var selection = chart.getSelection();
    if (selection.length > 0 && data.getValue(selection[0].row, 0) != '10021917') {
        mgrval = $('#managerid').text();
        ldrval = $('#leaderid').text();
        GetItemsLT(data.getValue(selection[0].row, 0), mgrval, ldrval);
    }
});

通过使用上面的代码，当用户点击类为“hrdata”的链接时，事件传播将停止，从而阻止图表的 select 事件触发。