redirect DOM Events to the canvas?

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 ( === "someOther") {
        let ne = new TouchEvent(e.type, e);

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

actually this code works but not perfectly:

let redirect = function(e) {

if ( === "someOther") {

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




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.

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:



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.

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.

true and yes that does seem to work.