触摸事件和键盘事件

转载：https://juejin.cn/post/6982387923266043941

MouseEvent

<div id="box"></div>

const box = document.getElementById('box');
let isMouseDown = false;
// 将mousedown事件绑定到box元素上
box.addEventListener('mousedown', function (e) {
    isMouseDown = true;
});
// 将mousemove事件绑定到document或window上，防止移动过快丢失目标元素
document.addEventListener('mousemove', function (e) {
    if (isMouseDown) {
        // todo
    }
});
// 将mouseup事件绑定到document或window上，防止在目标元素外释放鼠标
document.addEventListener('mouseup', function (e) {
    isMouseDown = false;
});

TouchEvent

<div id="box"></div>

const box = document.getElementById('box');
let point = { x: 0, y: 0 };
let point2 = { x: 0, y: 0 };

box.addEventListener('touchstart', function (e) {
    point = { x: e.touches[0].clientX, y: e.touches[0].clientY };
    // 第二个触摸点
    if (pointers.length > 1) {
	    point2 = { x: e.touches[1].clientX, y: e.touches[1].clientY };
    }
});

box.addEventListener('touchmove', function (e) {
    const current = { x: e.touches[0].clientX, y: e.touches[0].clientY };
    // 第二个触摸点
    if (e.touches.length > 1) {
        const current2 = { x: e.touches[1].clientX, y: e.touches[1].clientY };
    }
});

box.addEventListener('touchend', function (e) { });

box.addEventListener('touchcancel', function (e) { });

PointEvent

<div id="box"></div>

const box = document.getElementById('box');
let isPointerDown = false;
box.addEventListener('pointerdown', function (e) {
    isPointerDown = true;
});
box.addEventListener('pointermove', function (e) {
    box.setPointerCapture(e.pointerId);
    if (isPointerDown) {
        // todo
    }
});
box.addEventListener('pointerup', function (e) {
    isPointerDown = false;
});
box.addEventListener('pointercancel', function (e) {
    isPointerDown = false;
});

PointEvent 多点触控

<div id="box"></div>

const box = document.getElementById('box');
let pointers = [];
let point = { x: 0, y: 0 };
let point2 = { x: 0, y: 0 };
box.addEventListener('pointerdown', function (e) {
    // 维护一个数组，用于记录当前触摸点
    pointers.push(e);
    point = { x: pointers[0].clientX, y: pointers[0].clientY };
    // 第二个触摸点
    if (pointers.length > 1) {
	      point2 = { x: pointers[1].clientX, y: pointers[1].clientY };
    }
});
box.addEventListener('pointermove', function (e) {
    handlePointers(e, 'update');
    const current = { x: pointers[0].clientX, y: pointers[0].clientY };
    if (pointers.length > 1) {
	    const current2 = { x: pointers[1].clientX, y: pointers[1].clientY };
    }
});
box.addEventListener('pointerup', function (e) {
    handlePointers(e, 'delete');
});
box.addEventListener('pointercancel', function (e) {
    pointers = [];
});

/**
 * 处理指针
 * @param {PointerEvent} e 
 * @param {string} type 
 */
function handlePointers(e, type) {
    for (let i = 0; i < pointers.length; i++) {
        if (pointers[i].pointerId === e.pointerId) {
            if (type === 'update') {
                pointers[i] = e;
            } else if (type === 'delete') {
                pointers.splice(i, 1);
            }
        }
    }
}

触摸和键盘

转：https://threejs.org/examples/#webgl_geometry_text

container.addEventListener( 'pointerdown', onPointerDown );

document.addEventListener( 'keypress', onDocumentKeyPress );
document.addEventListener( 'keydown', onDocumentKeyDown );


let pointerXOnPointerDown, pointerX,

function onPointerDown( event ) {
    if ( event.isPrimary === false ) return;
    pointerXOnPointerDown = event.clientX

    document.addEventListener( 'pointermove', onPointerMove );
    document.addEventListener( 'pointerup', onPointerUp );

}

function onPointerMove( event ) {
    if ( event.isPrimary === false ) return;
    pointerX = event.clientX
}

function onPointerUp() {
    if ( event.isPrimary === false ) return;

    document.removeEventListener( 'pointermove', onPointerMove );
    document.removeEventListener( 'pointerup', onPointerUp );
}


function onDocumentKeyDown( event ) {
    const keyCode = event.keyCode;

    // backspace

    if ( keyCode == 8 ) {

        event.preventDefault();

        text = text.substring( 0, text.length - 1 );
        refreshText();

        return false;
    }

}

// chrome 下 keyCode == 8 是不会触发keypress
function onDocumentKeyPress( event ) {
    const keyCode = event.which;

    // backspace
    if ( keyCode == 8 ) {
        event.preventDefault();

    } else {

        const ch = String.fromCharCode( keyCode );
        text += ch;

        refreshText();

    }

}