使用 Konva 取消 HTML5 Canvas 事件冒泡传播
要使用 Konva 取消事件冒泡传播,我们可以将事件对象的 cancelBubble
属性设置为 true。
说明:点击圆形以观察只有圆形事件绑定被处理,因为当圆形事件被触发时事件传播被取消,从而阻止了事件对象向上冒泡。
- Vanilla
- React
- Vue
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);
import { Stage, Layer, Circle } from 'react-konva'; const App = () => { const handleCircleClick = (e) => { alert('您点击了圆形'); // 停止事件冒泡 e.cancelBubble = true; }; const handleLayerClick = () => { alert('您点击了图层'); }; return ( <Stage width={window.innerWidth} height={window.innerHeight}> <Layer onClick={handleLayerClick}> <Circle x={window.innerWidth / 2} y={window.innerHeight / 2} radius={70} fill="red" stroke="black" strokeWidth={4} onClick={handleCircleClick} /> </Layer> </Stage> ); }; export default App;
<template> <v-stage :config="stageSize"> <v-layer @click="handleLayerClick"> <v-circle :config="circleConfig" @click="handleCircleClick" /> </v-layer> </v-stage> </template> <script setup> const stageSize = { width: window.innerWidth, height: window.innerHeight }; const circleConfig = { x: window.innerWidth / 2, y: window.innerHeight / 2, radius: 70, fill: 'red', stroke: 'black', strokeWidth: 4 }; const handleCircleClick = (e) => { alert('您点击了圆形'); // 停止事件冒泡 e.cancelBubble = true; }; const handleLayerClick = () => { alert('您点击了图层'); }; </script>