Orillusion / orillusion

Orillusion is a pure Web3D rendering engine which is fully developed based on the WebGPU standard.
https://www.orillusion.com
MIT License
4.77k stars 617 forks source link

[BUG]: 鼠标右键点击事件无效 #370

Closed OriIIusion closed 2 months ago

OriIIusion commented 7 months ago

Bug描述

如案例所示,代码中添加了PointerEvent3D.POINTER_CLICK和PointerEvent3D.POINTER_RIGHT_CLICK的监听事件。 但是只有点击左键时才正确打印出文字 点击右键无反应

代码示例

https://codepen.io/OriIIusion/pen/LYadoJK

期待的结果

期待右键和左键一样,可以触发回调函数

引擎版本:

0.7.2

其他信息

以下是我的查错的路径与猜想 仅作为参考

下面的代码都是InputSystem.ts中的,对这两个函数开头增加了打印文字的代码,发现也是左键没问题,右键没反应

private mouseClick(e: MouseEvent) {
        console.log("左");
        this._pointerEvent3D.reset();
        this._pointerEvent3D.mouseCode = e.button;
        this._pointerEvent3D.mouseX = e.clientX - this.canvasX;
        this._pointerEvent3D.mouseY = e.clientY - this.canvasY;
        this._pointerEvent3D.type = PointerEvent3D.POINTER_CLICK;
        this._pointerEvent3D.ctrlKey = e.ctrlKey;
        this._pointerEvent3D.altKey = e.altKey;
        this._pointerEvent3D.shiftKey = e.shiftKey;
        this.dispatchEvent(this._pointerEvent3D);
    }
private rightClick(e: MouseEvent) {
        console.log("右");
        this._pointerEvent3D.reset();
        this._pointerEvent3D.mouseCode = e.button;
        this._pointerEvent3D.mouseX = e.clientX - this.canvasX;
        this._pointerEvent3D.mouseY = e.clientY - this.canvasY;
        // this._pointerEvent3D.target = this;
        this._pointerEvent3D.type = PointerEvent3D.POINTER_RIGHT_CLICK;

        this._pointerEvent3D.ctrlKey = e.ctrlKey;
        this._pointerEvent3D.altKey = e.altKey;
        this._pointerEvent3D.shiftKey = e.shiftKey;
        this.dispatchEvent(this._pointerEvent3D);
    }

然后到了这里

canvas.addEventListener(
            "click",
            (e: MouseEvent) => {
                //if right click
                if (e.button == 2) {
                    this.isRightMouseDown = false;
                    this.rightClick(e);
                } else if (e.button == 0) {
                    this.isMouseDown = false;
                    this.mouseClick(e);
                }
            },
            true
        );

猜想会不会是添加的click事件只有左键呢? 顺着canvas,来到了lib.dom.d.ts中,看到了下图 image 然后来到了这里https://developer.mozilla.org/zh-CN/docs/Web/API/Element/click_event 看到了这句话 image

OriIIusion commented 7 months ago

image 在这里打印了一下e,发现只有左键点击的时候触发,右键并不会触发。 也就是说e.button只能是0,所以也就永远到不了this.rightClick(e);这里

lslzl3000 commented 2 months ago

resolved #418