Skip to main content

使用 Konva 取消 HTML5 Canvas 事件冒泡传播

要使用 Konva 取消事件冒泡传播,我们可以将事件对象的 cancelBubble 属性设置为 true。

说明:点击圆形以观察只有圆形事件绑定被处理,因为当圆形事件被触发时事件传播被取消,从而阻止了事件对象向上冒泡。

import Konva from 'konva';

const stage = new Konva.Stage({
  container: 'container',
  width: window.innerWidth,
  height: window.innerHeight,
});

const layer = new Konva.Layer();
stage.add(layer);

const circle = new Konva.Circle({
  x: stage.width() / 2,
  y: stage.height() / 2,
  radius: 70,
  fill: 'red',
  stroke: 'black',
  strokeWidth: 4,
});

circle.on('click', function (evt) {
  alert('您点击了圆形');
  // 停止事件冒泡
  evt.cancelBubble = true;
});

layer.on('click', function () {
  alert('您点击了图层');
});

layer.add(circle);