mirror of
https://github.com/konvajs/konva.git
synced 2025-06-28 15:23:44 +08:00
fix mouse events on mobile devices
- remove check for mobile flag in mouse event handlers - remove workaround fake mousemove event in chrome browser https://code.google.com/p/chromium/issues/detail?id=161464 because it prevents mouse events working on Android mobile devices
This commit is contained in:
Technik Radio F.R.E.I
GitHub
parent
e1853e6e8b
commit
5bbb42d8fb
202
src/Stage.js
202
src/Stage.js
@ -396,43 +396,27 @@
|
||||
}
|
||||
},
|
||||
_mouseover: function(evt) {
|
||||
if (!Konva.UA.mobile) {
|
||||
this._setPointerPosition(evt);
|
||||
this._fire(CONTENT_MOUSEOVER, { evt: evt });
|
||||
}
|
||||
this._setPointerPosition(evt);
|
||||
this._fire(CONTENT_MOUSEOVER, { evt: evt });
|
||||
},
|
||||
_mouseout: function(evt) {
|
||||
if (!Konva.UA.mobile) {
|
||||
this._setPointerPosition(evt);
|
||||
var targetShape = this.targetShape;
|
||||
this._setPointerPosition(evt);
|
||||
var targetShape = this.targetShape;
|
||||
|
||||
if (targetShape && !Konva.isDragging()) {
|
||||
targetShape._fireAndBubble(MOUSEOUT, { evt: evt });
|
||||
targetShape._fireAndBubble(MOUSELEAVE, { evt: evt });
|
||||
this.targetShape = null;
|
||||
}
|
||||
this.pointerPos = undefined;
|
||||
|
||||
this._fire(CONTENT_MOUSEOUT, { evt: evt });
|
||||
if (targetShape && !Konva.isDragging()) {
|
||||
targetShape._fireAndBubble(MOUSEOUT, { evt: evt });
|
||||
targetShape._fireAndBubble(MOUSELEAVE, { evt: evt });
|
||||
this.targetShape = null;
|
||||
}
|
||||
this.pointerPos = undefined;
|
||||
|
||||
this._fire(CONTENT_MOUSEOUT, { evt: evt });
|
||||
},
|
||||
_mousemove: function(evt) {
|
||||
// workaround for mobile IE to force touch event when unhandled pointer event elevates into a mouse event
|
||||
if (Konva.UA.ieMobile) {
|
||||
return this._touchmove(evt);
|
||||
}
|
||||
// workaround fake mousemove event in chrome browser https://code.google.com/p/chromium/issues/detail?id=161464
|
||||
if (
|
||||
(typeof evt.movementX !== 'undefined' ||
|
||||
typeof evt.movementY !== 'undefined') &&
|
||||
evt.movementY === 0 &&
|
||||
evt.movementX === 0
|
||||
) {
|
||||
return null;
|
||||
}
|
||||
if (Konva.UA.mobile) {
|
||||
return null;
|
||||
}
|
||||
this._setPointerPosition(evt);
|
||||
var shape;
|
||||
|
||||
@ -485,27 +469,25 @@
|
||||
if (Konva.UA.ieMobile) {
|
||||
return this._touchstart(evt);
|
||||
}
|
||||
if (!Konva.UA.mobile) {
|
||||
this._setPointerPosition(evt);
|
||||
var shape = this.getIntersection(this.getPointerPosition());
|
||||
this._setPointerPosition(evt);
|
||||
var shape = this.getIntersection(this.getPointerPosition());
|
||||
|
||||
Konva.listenClickTap = true;
|
||||
Konva.listenClickTap = true;
|
||||
|
||||
if (shape && shape.isListening()) {
|
||||
this.clickStartShape = shape;
|
||||
shape._fireAndBubble(MOUSEDOWN, { evt: evt });
|
||||
} else {
|
||||
this._fire(MOUSEDOWN, {
|
||||
evt: evt,
|
||||
target: this,
|
||||
currentTarget: this
|
||||
});
|
||||
}
|
||||
|
||||
// content event
|
||||
this._fire(CONTENT_MOUSEDOWN, { evt: evt });
|
||||
if (shape && shape.isListening()) {
|
||||
this.clickStartShape = shape;
|
||||
shape._fireAndBubble(MOUSEDOWN, { evt: evt });
|
||||
} else {
|
||||
this._fire(MOUSEDOWN, {
|
||||
evt: evt,
|
||||
target: this,
|
||||
currentTarget: this
|
||||
});
|
||||
}
|
||||
|
||||
// content event
|
||||
this._fire(CONTENT_MOUSEDOWN, { evt: evt });
|
||||
|
||||
// always call preventDefault for desktop events because some browsers
|
||||
// try to drag and drop the canvas element
|
||||
// TODO: if we preventDefault() it will cancel event detection outside of window inside iframe
|
||||
@ -520,76 +502,74 @@
|
||||
if (Konva.UA.ieMobile) {
|
||||
return this._touchend(evt);
|
||||
}
|
||||
if (!Konva.UA.mobile) {
|
||||
this._setPointerPosition(evt);
|
||||
var shape = this.getIntersection(this.getPointerPosition()),
|
||||
clickStartShape = this.clickStartShape,
|
||||
clickEndShape = this.clickEndShape,
|
||||
fireDblClick = false,
|
||||
dd = Konva.DD;
|
||||
this._setPointerPosition(evt);
|
||||
var shape = this.getIntersection(this.getPointerPosition()),
|
||||
clickStartShape = this.clickStartShape,
|
||||
clickEndShape = this.clickEndShape,
|
||||
fireDblClick = false,
|
||||
dd = Konva.DD;
|
||||
|
||||
if (Konva.inDblClickWindow) {
|
||||
fireDblClick = true;
|
||||
clearTimeout(this.dblTimeout);
|
||||
// Konva.inDblClickWindow = false;
|
||||
} else if (!dd || !dd.justDragged) {
|
||||
// don't set inDblClickWindow after dragging
|
||||
Konva.inDblClickWindow = true;
|
||||
clearTimeout(this.dblTimeout);
|
||||
} else if (dd) {
|
||||
dd.justDragged = false;
|
||||
}
|
||||
|
||||
this.dblTimeout = setTimeout(function() {
|
||||
Konva.inDblClickWindow = false;
|
||||
}, Konva.dblClickWindow);
|
||||
|
||||
if (shape && shape.isListening()) {
|
||||
this.clickEndShape = shape;
|
||||
shape._fireAndBubble(MOUSEUP, { evt: evt });
|
||||
|
||||
// detect if click or double click occurred
|
||||
if (
|
||||
Konva.listenClickTap &&
|
||||
clickStartShape &&
|
||||
clickStartShape._id === shape._id
|
||||
) {
|
||||
shape._fireAndBubble(CLICK, { evt: evt });
|
||||
|
||||
if (
|
||||
fireDblClick &&
|
||||
clickEndShape &&
|
||||
clickEndShape._id === shape._id
|
||||
) {
|
||||
shape._fireAndBubble(DBL_CLICK, { evt: evt });
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this._fire(MOUSEUP, { evt: evt, target: this, currentTarget: this });
|
||||
if (Konva.listenClickTap) {
|
||||
this._fire(CLICK, { evt: evt, target: this, currentTarget: this });
|
||||
}
|
||||
|
||||
if (fireDblClick) {
|
||||
this._fire(DBL_CLICK, {
|
||||
evt: evt,
|
||||
target: this,
|
||||
currentTarget: this
|
||||
});
|
||||
}
|
||||
}
|
||||
// content events
|
||||
this._fire(CONTENT_MOUSEUP, { evt: evt });
|
||||
if (Konva.listenClickTap) {
|
||||
this._fire(CONTENT_CLICK, { evt: evt });
|
||||
if (fireDblClick) {
|
||||
this._fire(CONTENT_DBL_CLICK, { evt: evt });
|
||||
}
|
||||
}
|
||||
|
||||
Konva.listenClickTap = false;
|
||||
if (Konva.inDblClickWindow) {
|
||||
fireDblClick = true;
|
||||
clearTimeout(this.dblTimeout);
|
||||
// Konva.inDblClickWindow = false;
|
||||
} else if (!dd || !dd.justDragged) {
|
||||
// don't set inDblClickWindow after dragging
|
||||
Konva.inDblClickWindow = true;
|
||||
clearTimeout(this.dblTimeout);
|
||||
} else if (dd) {
|
||||
dd.justDragged = false;
|
||||
}
|
||||
|
||||
this.dblTimeout = setTimeout(function() {
|
||||
Konva.inDblClickWindow = false;
|
||||
}, Konva.dblClickWindow);
|
||||
|
||||
if (shape && shape.isListening()) {
|
||||
this.clickEndShape = shape;
|
||||
shape._fireAndBubble(MOUSEUP, { evt: evt });
|
||||
|
||||
// detect if click or double click occurred
|
||||
if (
|
||||
Konva.listenClickTap &&
|
||||
clickStartShape &&
|
||||
clickStartShape._id === shape._id
|
||||
) {
|
||||
shape._fireAndBubble(CLICK, { evt: evt });
|
||||
|
||||
if (
|
||||
fireDblClick &&
|
||||
clickEndShape &&
|
||||
clickEndShape._id === shape._id
|
||||
) {
|
||||
shape._fireAndBubble(DBL_CLICK, { evt: evt });
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this._fire(MOUSEUP, { evt: evt, target: this, currentTarget: this });
|
||||
if (Konva.listenClickTap) {
|
||||
this._fire(CLICK, { evt: evt, target: this, currentTarget: this });
|
||||
}
|
||||
|
||||
if (fireDblClick) {
|
||||
this._fire(DBL_CLICK, {
|
||||
evt: evt,
|
||||
target: this,
|
||||
currentTarget: this
|
||||
});
|
||||
}
|
||||
}
|
||||
// content events
|
||||
this._fire(CONTENT_MOUSEUP, { evt: evt });
|
||||
if (Konva.listenClickTap) {
|
||||
this._fire(CONTENT_CLICK, { evt: evt });
|
||||
if (fireDblClick) {
|
||||
this._fire(CONTENT_DBL_CLICK, { evt: evt });
|
||||
}
|
||||
}
|
||||
|
||||
Konva.listenClickTap = false;
|
||||
|
||||
// always call preventDefault for desktop events because some browsers
|
||||
// try to drag and drop the canvas element
|
||||
if (evt.cancelable) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user