redirect DOM Events to the canvas?

CesiumJS
1

Overlayed on top of the Cesium Widget are some other HTML elements of which, I wish to pass the events through to Cesium in order to have consistent zoom/pinch/rotation. I am dispatching touch events that are re-targeted (hence not user created and untrusted) to the canvas (there is only one) but they don't seem to be caught by the canvas. Should I be sending the events to some other element or object? Or perhaps I should be redirecting pointer events?
...
let redirect = function(e){
    if (e.target.className === "someOther") {
        let ne = new TouchEvent(e.type, e);
        viewer.canvas.dispatchEvent(ne);
    }
};

if (isMobile) {
    document.querySelector("div#main_body").addEventListener("touchstart", redirect, true);
    document.addEventListener("touchmove", redirect, true);
    document.addEventListener("touchend", redirect, true);
    document.addEventListener("touchcanceled", redirect, true);
}
...
Version 1.35 w/ Windows 10 or Linux in Chrome 64.0.3282.167

2

actually this code works but not perfectly:

let redirect = function(e) {

if (e.target.className === "someOther") {

 let newEvt = new PointerEvent(e.type, e);

    newEvt.preventDefault();

viewer.handler._element.dispatchEvent(newEvt);

e.stopPropagation();
}

};
if (isMobile) {

document.addEventListener(“pointerdown”, redirect, true);

document.addEventListener("pointermove", redirect, true);

document.addEventListener("pointerup", redirect, true);

document.addEventListener("pointercanceled", redirect, true);

}

But now the question is why not perfectly? do I have to do something with the other pointer events?

From the Cesium ScreenSpaceEventHandler:
function registerListeners(screenSpaceEventHandler) {

var element = screenSpaceEventHandler._element;

var alternateElement = !defined(element.disableRootEvents) ? document : element;

if (FeatureDetection.supportsPointerEvents()) {

registerListener(screenSpaceEventHandler, ‘pointerdown’, element, handlePointerDown);

registerListener(screenSpaceEventHandler, ‘pointerup’, element, handlePointerUp);

registerListener(screenSpaceEventHandler, ‘pointermove’, element, handlePointerMove);

registerListener(screenSpaceEventHandler, ‘pointercancel’, element, handlePointerUp);

} else {

registerListener(screenSpaceEventHandler, ‘mousedown’, element, handleMouseDown);

registerListener(screenSpaceEventHandler, ‘mouseup’, alternateElement, handleMouseUp);

registerListener(screenSpaceEventHandler, ‘mousemove’, alternateElement, handleMouseMove);

registerListener(screenSpaceEventHandler, ‘touchstart’, element, handleTouchStart);

registerListener(screenSpaceEventHandler, ‘touchend’, alternateElement, handleTouchEnd);

registerListener(screenSpaceEventHandler, ‘touchmove’, alternateElement, handleTouchMove);

registerListener(screenSpaceEventHandler, ‘touchcancel’, alternateElement, handleTouchEnd);

}

registerListener(screenSpaceEventHandler, ‘dblclick’, element, handleDblClick);

var wheelEvent;

if (‘onwheel’ in element) {

wheelEvent = ‘wheel’;

} else if (document.onmousewheel !== undefined) {

wheelEvent = ‘mousewheel’;

} else {

wheelEvent = ‘DOMMouseScroll’;

}

registerListener(screenSpaceEventHandler, wheelEvent, element, handleWheel);

}

only pointer events with up/down/move/cancel or mouse/touch events with up/start/down/end/move/cancel are listened to, but something weird happens when crossing element boundaries.

3

Hi there,

I’m a little confused on what exactly you are trying to accomplish, but I believe you can let the events bubble down to the cesium container to get the effect you want: https://javascript.info/bubbling-and-capturing

Thanks,

Gabby

4

I guess to put it more simply, there are div tags that are blocking the
flow of events to the canvas and I wasn't sure which type of events Cesium
was receptive to. I am work in a team on a large project where most of the
other developers have been using some kind of combination of JQuery with
mouse events and 'tap' events which I think might be some kind of
polyfill-like JQuery addon. In amongst the all the crazy event code I now
need to do something more newschool and I'm getting weird results. In truth
I think this not an issue with Cesium anymore, so you could just disregard
this thread as it is more about general event handling than Cesium.

5

If all you need to do is not have the div’s “block” the Cesium context underneath, just add pointer-events: none; to the div’s style.

6

true and yes that does seem to work.