将事件传递给同级 html 元素

Question

我用三个.js 创建了一个应用程序，有 2 个渲染器（1 个画布和 1 个 div（css 渲染器））。 css 渲染器位于画布顶部，我想将任何类型的事件传递给后面的画布元素。到目前为止，我未能创建调度程序...

到目前为止我所尝试的：

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 我收到以下错误：

未捕获的 InvalidStateError：无法执行“dispatchEvent” 'EventTarget': 事件已被调度。

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

Answer 1

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

改为尝试传递event.type：

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

Read up here.

JSFiddle（或with mouse coordinates）

为了也传递鼠标坐标，我传递了一个对象（鼠标）以及事件类型。