React / Preact中令人惊讶的缓慢点击事件

如何解决React / Preact中令人惊讶的缓慢点击事件

我有以下组件 (jsfiddle demo here)：

export function SomeComponent ()
{
    let t

    console.log("rendering...")

    return <div>
        <input
            type="text"
            defaultValue="value"
            onBlur={() => {
                t = performance.Now()
                console.log("blur...")

                const el = document.getElementsByClassName("option")[0]
                var evObj = document.createEvent("Events")
                evObj.initEvent("click",true,false)
                el.dispatchEvent(evObj)
            }}
        />

        <div
            onClick={(e) => console.log("click...",e.isTrusted,performance.Now() - t)}
            className="option"
        >Some Option</div>
    </div>
}

如果我将它呈现为应用程序中的唯一组件，即：render(<SomeComponent />,root)，然后如果我单击输入框，然后单击选项框，我会看到以下控制台输出：

rendering...
blur...
click... false 0.5050000036135316
click... true 5.465000052936375  // <-- this is the actual click event

为什么触发模糊事件的点击需要很长时间才能开始处理？虽然我不希望有，但无论如何可以加快速度？

经过测试：Chrome、Brave、Firefox、Safari。

Preact：10.5.7 并在 jsfiddle

上在 React 中得到确认

解决方法

这不是与性能相关的问题。点击事件需要一个 mousedown 跟随一个 mouseup 事件。第一个 mousedown 事件首先发生，并在随后的输入上触发 blur 事件，一段时间后，当您松开鼠标按钮时，mouseup 和 click 事件。时差主要取决于您单击鼠标的速度！ :)

This code 显示事件的顺序：

function SomeComponent ()
{
    let t

    console.log("rendering...")

    return <div>
        <input
            type="text"
            defaultValue="value"
            onBlur={() => {
                t = performance.now()
                console.log("blur...")

                const el = document.getElementsByClassName("option")[0]

                var evObj = document.createEvent("Events")
                evObj.initEvent("mousedown",true,false)
                el.dispatchEvent(evObj)

                evObj = document.createEvent("Events")
                evObj.initEvent("mouseup",false)
                el.dispatchEvent(evObj)

                evObj = document.createEvent("Events")
                evObj.initEvent("click",false)
                el.dispatchEvent(evObj)
            }}
        />

        <div
            onMouseDown={(e) => console.log("mouse down...",e.isTrusted,performance.now() - t)}
            onMouseUp={(e) => console.log("mouse up...",performance.now() - t)}
            onClick={(e) => console.log("click...",performance.now() - t)}
            className="option"
        >Some Option</div>
    </div>
}


ReactDOM.render(
<SomeComponent />,document.getElementById('container')
);

给出输出：

"mouse down...",NaN
"blur..."
"mouse down...",false,1.459999941289425
"mouse up...",2.7149999514222145
"click...",10.524999932385981
"mouse up...",12.214999995194376
"click...",12.69000000320375