Fatal编程技术网
  • javascript/
  • Javascript onBlur不'；当onClick以编程方式触发时，不会触发

Javascript onBlur不'；当onClick以编程方式触发时，不会触发

javascript reactjs events

Javascript onBlur不'；当onClick以编程方式触发时，不会触发,javascript,reactjs,events,Javascript,Reactjs,Events,我正在使用React组件： <div ref={tooltipContainer} onClick={() => { console.log('onclick'); }} onBlur={() => { console.log('onblur'); }} > // Hello </div> 但是，当我单击页面上的任何其他位置时，不会触发onBlur事件。如果没有提供contentEditable或tabindex=

我正在使用React组件：

<div
  ref={tooltipContainer}
  onClick={() => {
    console.log('onclick');
  }}
  onBlur={() => {
    console.log('onblur');
  }}
>
    // Hello
</div>
但是，当我单击页面上的任何其他位置时，不会触发
onBlur
事件。如果没有提供
contentEditable
或
tabindex=0
，那么显然
div
没有
onBlur
事件处理程序。但即使有了这些，你仍然需要一些调整

您希望使
div
聚焦于单击，而以编程方式单击它不会使其聚焦，因此您必须在
click（）下添加
tooltipContainer.current.focus（）



constmydiv=document.querySelector（“#myDiv”）；
myDiv.click（）；
myDiv.focus（）

#myDiv{
边框：1px纯绿色；
填充：1rem；
}


在框外单击
显然
div
没有
onBlur
事件处理程序，如果没有提供
contentEditable
或
tabindex=0
。但即使有了这些，你仍然需要一些调整

您希望使
div
聚焦于单击，而以编程方式单击它不会使其聚焦，因此您必须在
click（）下添加
tooltipContainer.current.focus（）



constmydiv=document.querySelector（“#myDiv”）；
myDiv.click（）；
myDiv.focus（）

#myDiv{
边框：1px纯绿色；
填充：1rem；
}


在框外单击
onBlur
在
unfocus
时触发，并且代码中没有焦点。上面的注释只是意味着，在调用click event时必须设置焦点。OnBlur将自动触发。
OnBlur
在
unfocus
时触发，并且代码中没有焦点。上面的注释只是意味着，在调用click事件时必须设置焦点。OnBlur将自动触发。

  useEffect(() => {
    if (someCondition) {
      tooltipContainer.current.click();
    }
  }, []);