Cytoscape 事件目标未定义

Question

我整理了一个最小的 Cytoscape 示例。我可以显示图表，但我最感兴趣的是处理事件，这就是我遇到困难的地方。

问题是我不能访问单个元素的属性，而是可以看到 任何事件的目标都是未定义的。

下面是我的整个 html 文件。请注意 - 我只对行

感兴趣

cy.nodes().bind('mouseover', (e) => console.log(e.target));

当我查看控制台时，每当我将鼠标指针移到节点上时，我只能看到 "undefined"。正如我上面所说，我希望最终能够访问元素属性。

<!doctype html>
<html>
<head>
<title>Tutorial 1: Getting Started</title>
<script src="cytoscape.js"></script>
</head>

<style>
#cy {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}
</style>
<body>
<div id="cy"></div><script>
      var cy = cytoscape({
        container: document.getElementById('cy'),
        elements: [
      { data: { id: 'a' } },
      { data: { id: 'b' } },
      {
        data: {
          id: 'ab',
          source: 'a',
          target: 'b'
        }
      }]
  });

  cy.unbind("tap"); 

cy.bind("tap", "edge",function(evt) {
var tgt=this;
  alert(tgt);

});

cy.nodes().bind('mouseover', (e) => console.log(e.target));  


</script>
</body>
</html>

Answer 1

您可以在下面的代码片段中看到一个有效的示例，我真的只是更改了导入，没有别的：

var cy = cytoscape({
  container: document.getElementById('cy'),
  elements: [{
      data: {
        id: 'a'
      }
    },
    {
      data: {
        id: 'b'
      }
    },
    {
      data: {
        id: 'ab',
        source: 'a',
        target: 'b'
      }
    }
  ]
});

cy.unbind("tap");

cy.bind("click", "node, edge", function(evt) {
  var tgt = evt.target.data();
  console.log(tgt);

});

cy.nodes().bind('mouseover', (e) => console.log(e.target.data()));

#cy {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
}

<html>

<head>
  <title>Tutorial 1: Getting Started</title>
  <script src="https://cdn.jsdelivr.net/npm/cytoscape@3.11.0/dist/cytoscape.min.js"></script>
</head>

<body>
  <div id="cy"></div>
</body>

</html>

Cytoscape 事件目标未定义

Cytoscape event target undefined

events

cytoscape.js