Question

我在Three.js场景上方有一些菜单项可以很好地使用鼠标，但是，在移动设备上，它们不会收到任何触摸/点击。

html元素位于页面中，即像这样

    <div id='Three.js container' ></div>
    <div id='menu' ></div>

以下是事件

document.addEventListener('mousedown', onDocumentMouseDown, false);
    document.addEventListener('mousemove', onDocumentMouseMove, false);
    document.addEventListener('mouseup', onDocumentMouseUp, false);
    document.addEventListener('mousewheel', onDocumentMouseWheel, false);

    document.addEventListener('touchstart', onDocumentTouchStart, false);
    document.addEventListener('touchmove', onDocumentTouchMove, false);
    document.addEventListener( 'touchend', onDocumentTouchEnd, false );

这是三个中的触摸处理程序

function onDocumentTouchStart(event) {



    if (event.touches.length == 1) {

        event.preventDefault();

        onPointerDownPointerX = event.touches[0].pageX;
        onPointerDownPointerY = event.touches[0].pageY;

        onPointerDownLon = lon;
        onPointerDownLat = lat;

        mouse.x = ( event.touches[0].pageX/ window.innerWidth ) * 0.1;
        mouse.y = ( event.touches[0].pageY / window.innerHeight ) * 0.1;

        detectHotspotClick();

    }

    if (event.touches.length == 2) {

        _state = STATE.TOUCH_ZOOM_PAN;
        var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX;
        var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY;
        _touchZoomDistanceEnd = _touchZoomDistanceStart = Math.sqrt( dx * dx + dy * dy ``);

    }

}

点击鼠标

    function onDocumentMouseDown(event) {

    event.preventDefault();

    isUserInteracting = true;

    if(selectedHotspot && !viewingHotspot){
        TWEEN.removeAll(); 
        selectedHotspot = null;
    }

    onPointerDownPointerX = event.clientX;
    onPointerDownPointerY = event.clientY;

    onPointerDownLon = lon;
    onPointerDownLat = lat;

    // update the mouse variable
    mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
    mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

    detectHotspotClick();

}

任何人都知道如何确保菜单收到触摸事件？

Answer 1

将事件侦听器添加到容器div，而不是文档

 document.getElementById("container").addEventListener('touchstart', onDocumentTouchStart, false);

三个以上的html元素没有收到触动

1 个答案: