Skip to content

Commit 7c7db35

Browse files
yunbookfyunbookf
committed
Refactor event handling to support both PointerEvent and MouseEvent
- Updated event listeners to handle PointerEvent and MouseEvent uniformly across various modules. - Enhanced the `down`, `long`, `menu`, and `gesture` functions to accept both event types, improving flexibility. - Modified the `isTouch` and `getEventPos` utility functions to accommodate MouseEvent. - Adjusted gesture handling logic to ensure proper event propagation and default behavior prevention. - Improved documentation for clarity on event handling and options.
1 parent 4bfa43e commit 7c7db35

12 files changed

Lines changed: 336 additions & 229 deletions

File tree

‎dist/index.esm.js‎

Lines changed: 96 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@ function sleep(ms, win = window) {
22
return new Promise(resolve => win.setTimeout(resolve, ms));
33
}
44
function isTouch(e) {
5+
if (!(e instanceof PointerEvent)) {
6+
return false;
7+
}
58
return e.pointerType === 'touch';
69
}
710
function getEventPos(e) {
@@ -103,6 +106,7 @@ function down(oe, opt) {
103106
const win = getWindow(oe);
104107
let { 'x': ox, 'y': oy } = getEventPos(oe);
105108
let isStart = false;
109+
const isPointer = oe instanceof PointerEvent;
106110
let end = undefined;
107111
const move = function (e) {
108112
if ((!e.target || !e.target.ownerDocument.body.contains(e.target))
@@ -119,31 +123,55 @@ function down(oe, opt) {
119123
if (!isStart) {
120124
isStart = true;
121125
if (opt.start?.(e) === false) {
126+
if (isPointer) {
127+
win.removeEventListener('pointermove', move);
128+
win.removeEventListener('pointerup', end);
129+
win.removeEventListener('pointercancel', end);
130+
}
131+
else {
132+
win.removeEventListener('mousemove', move);
133+
win.removeEventListener('mouseup', end);
134+
}
135+
return;
136+
}
137+
}
138+
if (opt.move?.(e, dir) === false) {
139+
if (isPointer) {
122140
win.removeEventListener('pointermove', move);
123141
win.removeEventListener('pointerup', end);
124142
win.removeEventListener('pointercancel', end);
125-
return;
143+
}
144+
else {
145+
win.removeEventListener('mousemove', move);
146+
win.removeEventListener('mouseup', end);
126147
}
127148
}
128-
if (opt.move?.(e, dir) === false) {
149+
};
150+
end = function (e) {
151+
if (isPointer) {
129152
win.removeEventListener('pointermove', move);
130153
win.removeEventListener('pointerup', end);
131154
win.removeEventListener('pointercancel', end);
132155
}
133-
};
134-
end = function (e) {
135-
win.removeEventListener('pointermove', move);
136-
win.removeEventListener('pointerup', end);
137-
win.removeEventListener('pointercancel', end);
156+
else {
157+
win.removeEventListener('mousemove', move);
158+
win.removeEventListener('mouseup', end);
159+
}
138160
opt.up?.(e);
139161
if (isStart) {
140162
opt.end?.(e);
141163
}
142164
};
143-
target?.setPointerCapture?.(oe.pointerId);
144-
win.addEventListener('pointermove', move, { 'passive': false });
145-
win.addEventListener('pointerup', end);
146-
win.addEventListener('pointercancel', end);
165+
if (isPointer) {
166+
target?.setPointerCapture?.(oe.pointerId);
167+
win.addEventListener('pointermove', move, { 'passive': false });
168+
win.addEventListener('pointerup', end);
169+
win.addEventListener('pointercancel', end);
170+
}
171+
else {
172+
win.addEventListener('mousemove', move, { 'passive': false });
173+
win.addEventListener('mouseup', end);
174+
}
147175
opt.down?.(oe);
148176
}
149177

@@ -682,7 +710,6 @@ const gestureWheel = {
682710
'offset': 0,
683711
'done': false,
684712
'timer': 0,
685-
'firstTimer': false,
686713
'dir': ''
687714
};
688715
const reverseDir = {
@@ -781,70 +808,72 @@ function gesture(oe, before, handler) {
781808
});
782809
}
783810
else {
784-
(async () => {
785-
const now = Date.now();
786-
if (now - gestureWheel.last > 250) {
787-
gestureWheel.offset = 0;
788-
gestureWheel.done = false;
789-
gestureWheel.timer = 0;
790-
gestureWheel.firstTimer = false;
791-
gestureWheel.dir = '';
792-
}
793-
gestureWheel.last = now;
794-
if (gestureWheel.firstTimer || gestureWheel.done) {
795-
return;
811+
const now = Date.now();
812+
if (now - gestureWheel.last > 250) {
813+
gestureWheel.offset = 0;
814+
gestureWheel.done = false;
815+
gestureWheel.timer = 0;
816+
gestureWheel.dir = '';
817+
}
818+
gestureWheel.last = now;
819+
if (gestureWheel.dir !== '' && oe.cancelable) {
820+
oe.stopPropagation();
821+
oe.preventDefault();
822+
}
823+
if (gestureWheel.done) {
824+
return;
825+
}
826+
let deltaY = oe.deltaY, deltaX = oe.deltaX;
827+
if (gestureWheel.dir === '') {
828+
gestureWheel.dir = getMoveDir(deltaX, deltaY);
829+
const rtn = before(oe, gestureWheel.dir);
830+
if (rtn === 1) {
831+
oe.stopPropagation();
832+
if (oe.cancelable) {
833+
oe.preventDefault();
834+
}
796835
}
797-
let deltaY = oe.deltaY, deltaX = oe.deltaX;
798-
if (gestureWheel.dir === '') {
799-
gestureWheel.dir = getMoveDir(deltaX, deltaY);
800-
const rtn = before(oe, gestureWheel.dir);
801-
if (rtn === 1) {
836+
else {
837+
if (rtn === -1) {
802838
oe.stopPropagation();
803-
oe.preventDefault();
839+
gestureWheel.done = true;
804840
}
805841
else {
806-
if (rtn === -1) {
807-
oe.stopPropagation();
808-
gestureWheel.done = true;
809-
}
810-
else {
811-
gestureWheel.dir = '';
812-
}
813-
return;
842+
gestureWheel.dir = '';
814843
}
815-
updateGestureStyle(rect, gestureWheel.dir, 0, true);
816-
gestureWheel.firstTimer = true;
817-
await sleep(30);
818-
gestureWheel.firstTimer = false;
819-
g.classList.add('pointer-gesture-ani');
820-
}
821-
const isVertical = gestureWheel.dir === 'top' || gestureWheel.dir === 'bottom';
822-
const delta = isVertical ? deltaY : deltaX;
823-
gestureWheel.offset += (gestureWheel.dir === 'top' || gestureWheel.dir === 'left') ? -delta : delta;
824-
if (gestureWheel.offset < 0) {
825-
gestureWheel.offset = 0;
826-
g.style.opacity = '0';
827-
return;
828-
}
829-
g.style.opacity = '1';
830-
let offset = Math.min(90, gestureWheel.offset / 1.38);
831-
g.classList.toggle('pointer-gesture-done', offset >= 90);
832-
updateGestureStyle(rect, gestureWheel.dir, offset);
833-
const win = getWindow(oe);
834-
win.clearTimeout(gestureWheel.timer);
835-
if (offset < 90) {
836-
gestureWheel.timer = win.setTimeout(() => {
837-
g.style.opacity = '0';
838-
g.classList.remove('pointer-gesture-ani');
839-
}, 250);
840844
return;
841845
}
842-
gestureWheel.done = true;
843-
handler?.(gestureWheel.dir);
844-
await sleep(500);
846+
updateGestureStyle(rect, gestureWheel.dir, 0, true);
847+
void g.offsetWidth;
848+
g.classList.add('pointer-gesture-ani');
849+
}
850+
const isVertical = gestureWheel.dir === 'top' || gestureWheel.dir === 'bottom';
851+
const delta = isVertical ? deltaY : deltaX;
852+
gestureWheel.offset += (gestureWheel.dir === 'top' || gestureWheel.dir === 'left') ? -delta : delta;
853+
if (gestureWheel.offset < 0) {
854+
gestureWheel.offset = 0;
855+
g.style.opacity = '0';
856+
return;
857+
}
858+
g.style.opacity = '1';
859+
let offset = Math.min(90, gestureWheel.offset / 1.38);
860+
g.classList.toggle('pointer-gesture-done', offset >= 90);
861+
updateGestureStyle(rect, gestureWheel.dir, offset);
862+
const win = getWindow(oe);
863+
win.clearTimeout(gestureWheel.timer);
864+
if (offset < 90) {
865+
gestureWheel.timer = win.setTimeout(() => {
866+
g.style.opacity = '0';
867+
g.classList.remove('pointer-gesture-ani');
868+
}, 250);
869+
return;
870+
}
871+
gestureWheel.done = true;
872+
handler?.(gestureWheel.dir);
873+
sleep(500).then(() => {
845874
g.style.opacity = '0';
846875
g.classList.remove('pointer-gesture-ani');
847-
})().catch(() => { });
876+
}).catch(() => { });
848877
}
849878
}
850879

0 commit comments

Comments
 (0)