G6: 图表冒泡事件

[southorange1228]

• G6 Version:
• Platform:
• Mini Showcase(like screenshots):
• CodePen Link:

<div onclick="open_AQ()">
      <div id="mountNode"></div>
    </div>

const data = {
        // 点集
        nodes: [{
          id: 'node1',
          x: 100,
          y: 200
        },{
          id: 'node2',
          x: 300,
          y: 200
        }],
        // 边集
        edges: [
          // 表示一条从 node1 节点连接到 node2 节点的边
          {
            source: 'node1',
            target: 'node2'
          }
        ]
      };

      // 创建 G6 图实例
      const graph = new G6.Graph({
        container: 'mountNode', // 指定图画布的容器 id，与第 9 行的容器对应
        // 画布宽高
        width: 800,
        height: 500
      });
      // 读取数据
      graph.data(data);
      // 渲染图
      graph.render();

      graph.on("node:click",function(e){
        console.log(e)
      })

      function open_AQ(){
        console.log("test")
      }

点击图表触发事件时，open_AQ事件也会触发 如何阻止事件冒泡

[baizn]

open_AQ方法有个参数，通过判断target来阻止。
另外也可以通过下面方式：

<div id='xxx'>
  <div id="mountNode"></div>
</div>

graph.on('node:click', evt => {
      console.log(evt)
      evt.preventDefault()
      evt.stopPropagation()
    })

    graph.on('node:mouseenter', evt => {
      const { item } = evt
      graph.setItemState(item, 'hover', true)
    })

    graph.on('node:mouseleave', evt => {
      const { item } = evt
      graph.setItemState(item, 'hover', false)
    })

    document.getElementById('mountNode').addEventListener('click', evt => {
      console.log('mountNode', evt)
      evt.preventDefault()
      evt.stopPropagation()
    })

    document.getElementById('xxx').addEventListener('click', evt => {
      // 不会执行到这里
      console.log('冒泡了', evt)
      evt.preventDefault()
      evt.stopPropagation()
    })

[xingorg1]

下边这样写，click事件还是执行呢，好像没有阻止节点点击的事件冒泡哎

graph.on('click', evt => {
     console.log('canvas 的点击事件')
    })
graph.on('node:click', evt => {
      console.log(evt)
      evt.preventDefault()
      evt.stopPropagation()
    })