将事件传递给兄弟HTML元素

Question

将事件传递给兄弟HTML元素

4

我用three.js创建了一个应用程序，其中有两个渲染器（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);

});

在第二种情况下，我遇到了以下错误：

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

我也尝试过复制对象或在一段时间后传递它，但似乎没有什么作用。我以前没有做过类似的事情，所以我希望能得到一些帮助或指导。

- 0x_Anakin

为什么不去除stopPropagation而让它继续传播呢？你只需要确保cssrenderer是你设置canvas的元素的子级（或后代）。 - vals

我尝试将dispatchEvent调用放入setTimeout中，这可以防止该错误。但出于某种原因，它似乎没有正确地分派事件。它的父级获得了事件，但我分派到的节点没有收到它。 - B T

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- theonlygusti · Answer 1

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

相反，尝试传递 event.type：

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

在这里阅读更多。

JSFiddle（或带有鼠标坐标）

为了传递鼠标坐标，我除了事件类型外还传递了一个对象（mouse）。