diff --git a/src/Stage.ts b/src/Stage.ts index c5887372..efab6faf 100644 --- a/src/Stage.ts +++ b/src/Stage.ts @@ -677,7 +677,7 @@ export class Stage extends Container { const clickStartShape = this[eventType + 'ClickStartShape']; const clickEndShape = this[eventType + 'ClickEndShape']; const processedShapesIds = {}; - let triggeredOnShape = false; + let skipPointerUpTrigger = false; this._changedPointerPositions.forEach((pos) => { const shape = (PointerEvents.getCapturedShape(pos.id) || this.getIntersection(pos)) as Shape; @@ -708,7 +708,7 @@ export class Stage extends Container { }, Konva.dblClickWindow); if (shape && shape.isListening()) { - triggeredOnShape = true; + skipPointerUpTrigger = true; this[eventType + 'ClickEndShape'] = shape; shape._fireAndBubble(events.pointerup, { ...event }); @@ -727,6 +727,16 @@ export class Stage extends Container { } else { this[eventType + 'ClickEndShape'] = null; + if (!skipPointerUpTrigger) { + this._fire(events.pointerup, { + evt: evt, + target: this, + currentTarget: this, + pointerId: this._changedPointerPositions[0].id, + }); + skipPointerUpTrigger = true; + } + if (Konva['_' + eventType + 'ListenClick']) { this._fire(events.pointerclick, { evt: evt, @@ -747,7 +757,7 @@ export class Stage extends Container { } }); - if (!triggeredOnShape) { + if (!skipPointerUpTrigger) { this._fire(events.pointerup, { evt: evt, target: this, diff --git a/test/unit/Stage-test.ts b/test/unit/Stage-test.ts index dff6d61f..ce9c8c0e 100644 --- a/test/unit/Stage-test.ts +++ b/test/unit/Stage-test.ts @@ -900,6 +900,32 @@ describe('Stage', function () { assert.equal(dblicks, 1, 'first dbclick registered'); }); + it('stage mouseup should fire before click on empty area', function () { + if (isNode) { + return; + } + var stage = addStage(); + var layer = new Konva.Layer(); + stage.add(layer); + + var order: string[] = []; + + stage.on('mousedown', function () { + order.push('down'); + }); + stage.on('mouseup', function () { + order.push('up'); + }); + stage.on('click', function () { + order.push('click'); + }); + + simulateMouseDown(stage, { x: 10, y: 10 }); + simulateMouseUp(stage, { x: 10, y: 10 }); + + assert.deepEqual(order, ['down', 'up', 'click']); + }); + it('can listen taps on empty areas', function () { var stage = addStage(); var layer = new Konva.Layer();