将事件传递给同级 html 元素

Pass event to a sibling html element

我创建了一个带有 three.js 的应用程序,其中有 2 个渲染器(1 个 canvas 和 1 个 div(css 渲染器))。 css 渲染器位于 canvas 之上,我想将任何类型的事件传递给后面的 canvas 元素。到目前为止,我未能创建调度程序...

到目前为止我尝试过的:

1)

// on top element css renderer 
$(this.cssRenderer.domElement).on("click mousedown mouseup mousemove focus blur keydown keyup change touchstart touchend touchmove", function ( event ) {

    event.preventDefault();
    event.stopImmediatePropagation();
    //canvas background domelement
    $(that.renderer.domElement).trigger(event);

});

2)

$(this.cssRenderer.domElement).on("click mousedown mouseup mousemove focus blur keydown keyup change touchstart touchend touchmove", function ( event ) {

    event.preventDefault();
    event.stopImmediatePropagation();

    that.renderer.domElement.dispatchEvent(event.originalEvent);

});

在情况 2 中我得到以下错误:

Uncaught InvalidStateError: Failed to execute 'dispatchEvent' on 'EventTarget': The event is already being dispatched.

我也尝试过复制对象或在超时后传递它,但似乎没有任何效果。 我没有做过类似的事情,所以我需要一点帮助或一些指导。

您不能只将 event 传递给触发器函数,因为事件是一个对象,触发器需要一个字符串作为参数。

相反,尝试传递 event.type

$(that.renderer.domElement).trigger(event.type);

Read up here.

JSFiddle (or with mouse coordinates)

为了同时传递鼠标坐标,我传递了一个对象(鼠标)以及事件类型。