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

目录
  • 前言
  • 触发场景
    • 使用tabIndex使非表单元素支持focus和blur事件
    • 不支持冒泡
    • 支持捕获
    • react中的focus和blur支持冒泡

前言

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

触发场景

  • 鼠标点击
  • 键盘tab键
  • 直接调用dom的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>

以上就是focus blur 事件的详细内容，更多关于focus blur 事件的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • ReactJs实现树形结构的数据显示的组件的示例

    ReactJs实现树形结构的数据显示的组件的示例

    本文介绍了ReactJs实现树形结构的数据显示的组件的示例,分享给大家,具体如下: 1.该组件树形显示数据 2.组件中数据的请求方式为fetch方式 3.点击对应的数据前面的小三角,fetch请求改数据下对应的子数据,并展开该节点. 4.将该组件的js.less文件放到kpiTree目录下,在kpiTree目录下创建images目录将组件需要的图片放入给目录,在kpiTree目录下创建json文件夹将该组件需要的json文件放入改文件夹中,组件便可正常运行. kpiTree.js文件 /** *

  • React Fiber 链表操作及原理示例详解

    React Fiber 链表操作及原理示例详解

    目录 正文 什么是Fiber Fiber节点React源码 Fiber树是链表 节点独立 节省操作时间与单向操作 利于双缓存与异步可中断更新操作 异步可中断更新 双缓存 正文 看了React源码之后相信大家都会对Fiber有自己不同的见解,而我对Fiber最大的见解就是这玩意儿就是个链表.如果把整个Fiber树当成一个整体确实有点难理解源码,但是如果把它拆开了,将每个节点都看成一个独立单元却能得到一个很清晰的思路,接下来我就简单几点讲讲,我所认为的为什么React要用链表这种数据结构来构建Fib

  • jsoneditor二次封装实时预览json编辑器组件react版

    jsoneditor二次封装实时预览json编辑器组件react版

    目录 前言 设计思路 正文 jsoneditor的使用 结合react进行二次封装 前言 做为一名前端开发人员,掌握vue/react/angular等框架已经是必不可少的技能了,我们都知道,vue或react等MVVM框架提倡组件化开发,这样一方面可以提高组件复用性和可扩展性,另一方面也带来了项目开发的灵活性和可维护,方便多人开发协作.接下来文章将介绍如何使用react,开发一个自定义json编辑器组件.我们这里使用了jsoneditor这个第三方库,官方地址: jsoneditor 通过实现

  • react-diagram 序列化Json解读案例分析

    react-diagram 序列化Json解读案例分析

    本文目标 本文档的目标在于解释react-diagram框架模型序列化的Json,由于缺乏文档,我这边只能通过不断尝试和调试来进行测试. 序列化案例1:空画布 { "id": "27", "offsetX": 0, "offsetY": 0, "zoom": 100, "gridSize": 0, "layers": [ { "id": "

  • React Native 的动态列表方案探索详解

    React Native 的动态列表方案探索详解

    目录 背景 技术方案介绍 内存 异常处理 未来规划 背景 时至2022,精细化运营已经成为了各大App厂商的强需求,阿里的 DinamicX.Tangram 大家应该都很熟悉了,很多App厂商也自研了一些类似框架,基于DSL的动态化方案虽然有性能上的一些优势,但是毕竟不是图灵完备,一些需要逻辑动态下发的需求实现成本偏高,或由于DSL本身限制无法实现,针对这个问题我们使用RN进行了一下探索尝试, 利用我们已经相对完善的RN基建,结合客户端列表能力低成本的实现了一套的动态化能力,同时兼顾一定的性能体

  • React虚拟渲染实现50个或者一百个图表渲染

    React虚拟渲染实现50个或者一百个图表渲染

    目录 前言 需求 方案 实现 VirtualScroll 组件实现 使用 结束语 前言 最近有个需求,一个页面上要渲染50个或者100个图表,把功能实现后,页面太卡了.之前用过虚拟渲染能解决此类的问题,但用的都是别人写好的库,想了想,自己实现也并不复杂,于是决定自己实现一下. 需求 每行渲染3个图表,右上角的切换可以有50个,100个,或者更多. 方案 虚拟列表其实就是对可视区域做渲染.对不可见的内容不渲染或者预渲染一部分,预渲染一部分,可以减少白屏的内容 我们从上面的图可以看到 可视区域就是我

  • React表中显示JSON数据demo

    目录 引言 项目设置 从API获取数据 在React中创建一个表 结论 引言 可能每个网站都会以这样或那样的方式消耗数据.最常见的情况是,你会遇到需要在表中显示数据的情况. 在本教程中,我们将研究如何获取JSON数据并将其显示在一个表中. 让我们开始吧! 项目设置 通过在你的机器上创建react app或打开浏览器并访问react.new来开始. 一个新的CodeSandbox环境将打开,并设置了React项目. 从API获取数据 在React中,有很多方法来获取数据,但在本教程中,我们将使用*

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

    目录 前言 触发场景 使用tabIndex使非表单元素支持focus和blur事件 不支持冒泡 支持捕获 react中的focus和blur支持冒泡 前言 在浏览器中表单元素天然支持focus和blur事件,这两个事件在开发过程中出现的频率还是挺高的,前端开发者也都比较熟悉,在这里特意总结一下. 触发场景 鼠标点击 键盘tab键 直接调用dom的focus,blur方法 使用tabIndex使非表单元素支持focus和blur事件 给一个普通的div元素增加tabIndex属性后,这个元素就能支

  • jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题

    HTML结构:很简单,就一个input,一个div,能说明问题就OK了: <input type="text" value="默认值"><br/><br/><div>搜索</div> 想要实现的结果: 1.input框获取焦点时value为"",失去焦点时value为"默认值":-----这个很好实现: 2.当在input框中输入要搜素的内容后,点击div搜索,要求控

  • 表单元素与非表单元素刷新区别详细解析

    一.表单元素如果用js赋值刷新后,记录是js赋值后的值而不是初始值<html><head><script type="text/javascript">function bb(){var aa=document.getElementById_x("aa");    aa.value="3";}</script></head><body><form method=&quo

  • vue 表单输入框不支持focus及blur事件的解决方案

    采用指令的方式来解决这个问题(此处的前端框架以mint-ui为例): 1.html引用: v-mtfocus 2.在实例中添加指令 directives: { 'mtfocus' (el, binding, vnode) { let mtinput = el.querySelector('input') mtinput.onfocus = function () { ...//如果要对节点的数据进行更改,且更改要映射到页面上,则更改可在vnode.context上进行,这样,改完之后,改变就会映

  • 表单元素事件 (Form Element Events)

    属性 值 描述 onchange 脚本 当元素改变时执行脚本 onsubmit 脚本 当表单被提交时执行脚本 onreset 脚本 当表单被重置时执行脚本 onselect 脚本 当元素被选取时执行脚本 onblur 脚本 当元素失去焦点时执行脚本 onfocus 脚本 当元素获得焦点时执行脚本 w3c的标准是这么描述的. 可是发现IE可以执行(不过如果你在遨游下测试onfocus的话千万别用alert(),会无限弹出.),其他浏览器都不可以实现.IE向来是个不听话的主,都是搞私有主义的....

  • HTML表单元素覆盖样式元素问题及其补救之道

    HTML表单元素覆盖样式元素问题及其补救之道

    在设计HTML页面的过程中经常会遇到表单元素覆盖样式元素引起的问题,图一就是一个典型的例子.不要小看这个貌似"低级"的问题,即使一些规模较大的网站上类似的问题也绝不鲜见.本文探讨了造成这一问题的根本原因,并提出一种补救办法--之所以说补救办法而不是一劳永逸的解决办法,是因为微软和NetScape这两个巨头也还没有对策. 一.HTML元素的显示优先级 HTML中常用的表单元素包括:文本区域(TEXTAREA),列表框(SELECT),文本输入框(INPUT type=text),密码输入

  • AngularJS实现表单元素值绑定操作示例

    AngularJS实现表单元素值绑定操作示例

    本文实例讲述了AngularJS实现表单元素值绑定操作.分享给大家供大家参考,具体如下: ng-disabled:绑定控件的disabled属性 ng-show:显示或者隐藏元素:ms-visible ng-hide:和ng-show的功能恰好相反 css内容: div.d1{ width: 20px; height: 20px; background-color: pink; } div.d2{ width: 20px; height: 20px; background-color: blac

  • AngularJS使用指令增强标准表单元素功能

    AngularJS使用指令增强标准表单元素功能

    Angular 可使用指令无缝地增强标准表单元素的功能,我们将讨论它的优点,包括: 数据绑定.建立模型属性.验证表单.验证表单后反馈信息.表单指令属性 下面我们通过案例验证他们的用法: 一.双向数据绑定(ng-model)和建立模型属性 <!DOCTYPE> <!-- use module --> <html ng-app="exampleApp"> <head> <title>Angular Directive</ti

  • jQuery选择器之表单元素选择器详解

    jQuery选择器之表单元素选择器详解

    本文实例为大家分享了表单元素选择器,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <link rel="stylesheet" href="imooc

  • VUE实现表单元素双向绑定（总结）

    本文介绍了VUE实现表单元素双向绑定(总结) ,分享给大家,具体如下: checkbox最基本用法: <input type="checkbox" v-model="inputdata" checked/> <input type="checkbox" v-model="inputdata"/> <input type="checkbox" v-model="inpu

随机推荐