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

Question

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 中得到确认

Answer 1

这不是性能相关的问题。单击事件需要 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", true, false)
                el.dispatchEvent(evObj)

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

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


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

给出输出：

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

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

Surprisingly slow click event in React / Preact

javascript

performance

preact