问题描述
我有以下组件 (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