Question

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

问题在于，我无法访问任何元素的属性，而是看到未定义任何事件的目标。

下面是我的整个html文件。请注意-我仅对该行感兴趣

cy.nodes（）。bind（'mouseover'，（e）=> console.log（e.target））;

当我查看控制台时，每当将鼠标指针移到节点上时，我只能看到“未定义”。如上所述，我希望最终能够访问元素属性。

<!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事件目标未定义

1 个答案: