javascript - Getorgchart 中的鼠标悬停事件

Question

Getorgchart 视图中的鼠标悬停事件。如何在 Getorgchart 视图中编写鼠标悬停事件和鼠标移出事件。我应该在鼠标悬停/离开时获取组织结构图元素的详细信息吗？

Answer 1

您可以将鼠标悬停事件附加到每个节点。这是一个例子

var orgchart = new getOrgChart(document.getElementById("people"), {
    updatedEvent: mouseoverListener,
    dataSource: [
        { id: 1, parentId: null, Name: "Amber McKenzie" },
        { id: 2, parentId: 1, Name: "Ava Field" },
        { id: 3, parentId: 1, Name: "Evie Johnson" }]
});

function mouseoverListener() {
    var boxes = document.querySelectorAll("[data-node-id]");
    for (i = 0; i < boxes.length; i++) {
        boxes[i].addEventListener("mouseover", function () { alert("hovered node ID is " + this.getAttribute("data-node-id")) });
    }
}

mouseoverListener();