javascript - 将事件传递给同级 html 元素

Question

我用 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.

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

Answer 1

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

相反，尝试传递event.type:

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

Read up here .

JSFiddle (或with mouse coordinates)

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