diff --git a/packages/core/src/createInput/mouse.ts b/packages/core/src/createInput/mouse.ts index c99e94ba..12dfbede 100644 --- a/packages/core/src/createInput/mouse.ts +++ b/packages/core/src/createInput/mouse.ts @@ -1,11 +1,11 @@ import type { phase, PointClientXY } from '@any-touch/shared'; import { MOUSE_DOWN, MOUSE_MOVE, MOUSE_UP, TYPE_START, TYPE_MOVE, TYPE_END } from '../const'; import inputCreator from './inputCreator'; -export default function () { +export default function (buttons: Set = new Set([0])) { let prevPoints: PointClientXY[]; let isPressed = false; // mousedown阶段的target, - // 因为mousemove/end都绑定的window, + // 因为mousemove/end都绑定的window, // 所以需要对move/end阶段的target进行修改同步 // 主要为了在事件委派这种模式下, // 可以正确的判断事件返回的target是否包含于_target中 @@ -18,9 +18,8 @@ export default function () { let points = [{ clientX, clientY, target }]; let phase: phase | undefined; - if (MOUSE_DOWN === type && 0 === button) { + if (MOUSE_DOWN === type && buttons.has(button)) { _target = target; - // 必须左键 isPressed = true; phase = TYPE_START; } else if (isPressed) { @@ -35,7 +34,7 @@ export default function () { return; } // changedPoints = prevPoints其实并不能完全等于touch下的changedPoints - // 但是由于鼠标没有多点输入的需求, + // 但是由于鼠标没有多点输入的需求, // 所以暂时如此实现 const changedPoints = prevPoints || [{ clientX, clientY, target }]; @@ -52,4 +51,4 @@ export default function () { }); } } -} \ No newline at end of file +} diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index 1e0f5487..919b9ae0 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -44,6 +44,10 @@ export { AnyTouchEvent } from '@any-touch/shared'; export interface Options { // 是否触发DOM事件 domEvents?: false | EventInit; + // 是否在捕获阶段处理事件 + capture?: boolean; + // 支持触发事件的鼠标按钮,取值参见MouseEvent.button + buttons?: Set; preventDefault?: boolean | ((e: NativeEvent) => boolean); } @@ -54,6 +58,7 @@ const TYPE_COMPUTED = 'computed'; */ const DEFAULT_OPTIONS: Options = { domEvents: { bubbles: true, cancelable: true }, + capture: false, preventDefault: (event) => { // console.log((event.target as any).tagName); if (event.target && 'tagName' in event.target) { @@ -141,7 +146,7 @@ export default class extends AnyEvent { // 是因为调用this.__inputCreatorMap[event.type]的时候还要判断类型, // 因为都是固定(touch&mouse)事件绑定好的, 没必要判断 const createInputFromTouch = touch(this.el) as InputCreatorFunction; - const createInputFromMouse = mouse() as InputCreatorFunction; + const createInputFromMouse = mouse(this.__options.buttons) as InputCreatorFunction; this.__inputCreatorMap = { [TOUCH_START]: createInputFromTouch, [TOUCH_MOVE]: createInputFromTouch, @@ -187,14 +192,11 @@ export default class extends AnyEvent { // 只有在preventDefault中显式的指明false才能使用{ passive: true } // fix: document和body上绑定事件的时候, 默认passive=true // https://github.com/any86/Notes/issues/82 - this.on( - TYPE_UNBIND, - bindElement( - el, - this.catchEvent.bind(this), - false === this.__options.preventDefault && supportsPassive ? { passive: true } : { passive: false } - ) - ); + const options: AddEventListenerOptions = { + capture: this.__options.capture, + }; + options.passive = false === this.__options.preventDefault && supportsPassive; + this.on(TYPE_UNBIND, bindElement(el, this.catchEvent.bind(this), options)); } } @@ -265,7 +267,7 @@ export default class extends AnyEvent { */ compute( computeFunctionCreatorList: CList, - // CList[0]的0是几都没关系, + // CList[0]的0是几都没关系, // 因为不是元祖, // 所以结果都会是ReturnType|ReturnType callback: (computed: UnionToIntersection>> & Input) => void, @@ -342,4 +344,4 @@ export default class extends AnyEvent { this.emit(TYPE_UNBIND); super.destroy(); } -} \ No newline at end of file +}