Match-id-41cb5e6a5cd84d46c0ca25928310ca73055d6c98

This commit is contained in:
* 2022-02-11 16:51:15 +08:00 committed by *
commit afed2da2e4
4 changed files with 43 additions and 141 deletions

View File

@ -6,42 +6,16 @@ import {VNode} from '../../renderer/Types';
// 从原生事件中复制属性到自定义事件中
function extendAttribute(target, source) {
const attributes = [
// AnimationEvent
'animationName', 'elapsedTime', 'pseudoElement',
// CompositionEvent、InputEvent
'data',
// DragEvent
'dataTransfer',
// FocusEvent
'relatedTarget',
// KeyboardEvent
'key', 'keyCode', 'charCode', 'code', 'location', 'ctrlKey', 'shiftKey',
'altKey', 'metaKey', 'repeat', 'locale', 'getModifierState', 'clipboardData',
// MouseEvent
'button', 'buttons', 'clientX', 'clientY', 'movementX', 'movementY',
'pageX', 'pageY', 'screenX', 'screenY', 'currentTarget',
// PointerEvent
'pointerId', 'width', 'height', 'pressure', 'tangentialPressure',
'tiltX', 'tiltY', 'twist', 'pointerType', 'isPrimary',
// TouchEvent
'touches', 'targetTouches', 'changedTouches',
// TransitionEvent
'propertyName',
// UIEvent
'view', 'detail',
// WheelEvent
'deltaX', 'deltaY', 'deltaZ', 'deltaMode',
];
let val;
for (let attr in source) {
// 这两个方法需要override
if (attr === 'preventDefault' || attr === 'stopPropagation') {
continue;
}
const length = attributes.length;
let attr;
let type;
for (let i = 0; i < length; i++) {
attr = attributes[i];
type = source[attr];
if (type !== 'undefined') {
if (type === 'function') {
val = source[attr];
if (val !== undefined) {
if (typeof val === 'function') {
target[attr] = function() {
return source[attr].apply(source, arguments);
};
@ -51,21 +25,40 @@ function extendAttribute(target, source) {
}
}
}
// 兼容IE的event key
const uniqueKeyMap = new Map([
['Esc', 'Escape'],
['Spacebar', ' '],
['Left', 'ArrowLeft'],
['Up', 'ArrowUp'],
['Right', 'ArrowRight'],
['Down', 'ArrowDown'],
['Del', 'Delete'],
]);
export class CustomBaseEvent {
data: string;
defaultPrevented: boolean;
customEventName: string;
targetVNode: VNode;
type: string;
nativeEvent: any;
target: EventTarget;
timeStamp: number;
isDefaultPrevented: () => boolean;
isPropagationStopped: () => boolean;
currentTarget: EventTarget;
relatedTarget: EventTarget;
// custom事件自定义属性
customEventName: string;
targetVNode: VNode;
type: string;
timeStamp: number;
nativeEvent: any;
// 键盘事件属性
key: string;
charCode: number;
keyCode: number;
which: number;
constructor(
customEvtName: string | null,
nativeEvtName: string,
@ -76,29 +69,25 @@ export class CustomBaseEvent {
// 复制原生属性到自定义事件
extendAttribute(this, nativeEvt);
// custom事件自定义属性
this.customEventName = customEvtName;
this.targetVNode = vNode;
this.type = nativeEvtName;
this.nativeEvent = nativeEvt;
this.target = target;
this.timeStamp = nativeEvt.timeStamp || Date.now();
const defaultPrevented = nativeEvt.defaultPrevented != null ?
nativeEvt.defaultPrevented :
nativeEvt.returnValue === false;
this.defaultPrevented = defaultPrevented;
this.preventDefault = this.preventDefault.bind(this);
this.stopPropagation = this.stopPropagation.bind(this);
this.isDefaultPrevented = () => defaultPrevented;
this.isPropagationStopped = () => false;
this.relatedTarget = nativeEvt.relatedTarget;
}
this.target = target;
// 兼容性方法
persist() {
// 键盘事件属性
this.key = uniqueKeyMap.get(nativeEvt.key) || nativeEvt.key;
// custom事件自定义属性
this.customEventName = customEvtName;
this.targetVNode = vNode;
this.type = nativeEvtName;
this.nativeEvent = nativeEvt;
}
// 阻止默认行为

View File

@ -1,77 +0,0 @@
/**
*
*/
import type {VNode} from '../../renderer/Types';
import {CustomBaseEvent} from './CustomBaseEvent';
import {CHAR_CODE_ENTER} from '../const';
const uniqueKeyMap = new Map([
['Esc', 'Escape'],
['Spacebar', ' '],
['Left', 'ArrowLeft'],
['Up', 'ArrowUp'],
['Right', 'ArrowRight'],
['Down', 'ArrowDown'],
['Del', 'Delete'],
]);
const charCodeToKeyMap = new Map([
[8, 'Backspace'],
[9, 'Tab'],
[13, 'Enter'],
[16, 'Shift'],
[17, 'Control'],
[18, 'Alt'],
[19, 'Pause'],
[27, 'Escape'],
[32, ' '],
[33, 'PageUp'],
[34, 'PageDown'],
[35, 'End'],
[36, 'Home'],
[37, 'ArrowLeft'],
[38, 'ArrowUp'],
[39, 'ArrowRight'],
[40, 'ArrowDown'],
[46, 'Delete']
]);
function getKey(event) {
if (event.key) {
return uniqueKeyMap.get(event.key) || event.key;
}
if (event.type === 'keypress') {
const charCode = event.charCode;
return charCode === CHAR_CODE_ENTER ? 'Enter' : String.fromCharCode(charCode);
}
if (event.type === 'keydown' || event.type === 'keyup') {
return charCodeToKeyMap.get(event.keyCode);
}
return '';
}
export class CustomKeyboardEvent extends CustomBaseEvent {
key: string;
charCode: number;
keyCode: number;
which: number;
constructor(
customEvtName: string | null,
nativeEvtName: string,
nativeEvt: { [propName: string]: any },
vNode: VNode,
target: null | EventTarget
) {
super(customEvtName, nativeEvtName, nativeEvt, vNode, target);
this.key = getKey(nativeEvt);
this.charCode = nativeEvtName === 'keypress' ? nativeEvt.charCode : 0;
this.keyCode = (nativeEvtName === 'keydown' || nativeEvtName === 'keyup') ? nativeEvt.keyCode : 0;
this.which = this.charCode || this.keyCode;
}
}

View File

@ -1,16 +1,8 @@
import {CustomKeyboardEvent} from './CustomKeyboardEvent';
import {CustomBaseEvent} from './CustomBaseEvent';
const keyboardEvents = {
keypress: CustomKeyboardEvent,
keydown: CustomKeyboardEvent,
keyup: CustomKeyboardEvent,
}
// 创建普通自定义事件对象实例,和原生事件对应
export function createCustomEvent(customEventName, nativeEvtName, nativeEvent, vNode, currentTarget) {
const EventConstructor = keyboardEvents[nativeEvtName] || CustomBaseEvent;
return new EventConstructor(
return new CustomBaseEvent(
customEventName,
nativeEvtName,
nativeEvent,

View File

@ -13,11 +13,9 @@ import {
} from './LifeCycleHandler';
import {tryRenderFromRoot} from '../TreeBuilder';
import {
BySync,
InRender,
copyExecuteMode,
setExecuteMode,
checkMode,
changeMode,
} from '../ExecuteMode';
import {