亲宝软件园·资讯

展开

React tabIndex使非表单元素支持focus和blur事件

空山与新雨 人气:0

前言

在浏览器中表单元素天然支持focus和blur事件,这两个事件在开发过程中出现的频率还是挺高的,前端开发者也都比较熟悉,在这里特意总结一下。

触发场景

使用tabIndex使非表单元素支持focus和blur事件

给一个普通的div元素增加tabIndex属性后,这个元素就能支持focus和blur事件了。可以设置tabIndex为-1,这样元素既可以被focus,同时不会被键盘访问到。

<div id="d1" tabindex="-1">
    1111
</div>
<script>
  const d1 = document.querySelector('#d1');
  d1.addEventListener('focus', function () {
    console.log('d1 focus') // 会触发focus
  })
</script>

不支持冒泡

下面的例子中我们期待focus<input />的时候会触发div的focus事件,然而事与愿违,原因就是focus事件不支持冒泡

<div id="d1" tabindex="-1">
    原生 <input id="d2" />
    1111
</div>
<script>
  const d1 = document.querySelector('#d1');
  d1.addEventListener('focus', function () {
    console.log('d1 focus') // 不会触发focus
  })
</script>

支持捕获

<div id="d1" tabindex="-1">
    原生 <input id="d2" />
    1111
</div>
<script>
  const d1 = document.querySelector('#d1');
  d1.addEventListener('focus', function () {
    console.log('d1 focus') // 会触发focus
  }, {capture: true})
</script>

react中的focus和blur支持冒泡

这就很有意思了,原因是react中使用合成事件,自己完成了一套冒泡逻辑。

<div id="root"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/react/16.11.0/umd/react.production.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.18.4/babel.min.js"></script>
<script type="text/babel">
  class App extends React.Component {
    focus=()=> {
      console.log('div focus') // 会触发focus
    }
    inputFocus=()=>{
      console.log('input focus') // 会触发focus
    }
    render() {
      return <div onFocus={this.focus}  >
        react <input onFocus={this.inputFocus} />
      </div>
    }
  }
  window.onload = function () {
    ReactDOM.render(<App />, document.querySelector('#root'))
  }
</script>

加载全部内容

相关教程
猜你喜欢
用户评论