：focus-within的冒泡触发

看个具体的例子：

<html>
<style>
html,
body,
.g-father,
.g-children {padding: 30px;border:1px solid green;
}input {display: block;border: none;outline: none;border: 1px solid black;margin: 0 auto;
}input:focus {background: yellow;}html:focus-within {background: red;
}body:focus-within {background: purple
}.g-father:focus-within {background: white;
}.g-children:focus-within {background: pink;
}.g-html,
.g-body,
.g-fath,
.g-chil {position: fixed;
}.g-html {left: 30px;top: 10px;
}
.g-body {left: 60px;top: 40px;
}.g-fath {top: 70px;left: 90px;
}.g-chil {top: 100px;left: 120px;
}
</style>
<div class="g-father"><div class="g-children"><input type="button" value="Button"></div>
</div><div class="g-html">HTML</div>
<div class="g-body">BODY</div>
<div class="g-fath">Father</div>
<div class="g-chil">Children</div>
</html>

初始页面：

button获得focus后：

button变成黄色：

children变成粉色，father变成白色，body变成紫色，html变成红色

更多Jerry的原创文章，尽在：“汪子熙”:

：focus-within的冒泡触发相关推荐

input的focus事件阻止冒泡
在写界面的时候,选中一个输入框,就会弹出一个弹窗.还需要做可清除. 在加了clearable属性之后,就遇到问题了.点击 X 图标进行清楚之后,弹窗也会打开. 注意:我这里使用的是vxe-input, ...
html focus 唤醒手机键盘,移动端 input 元素 focus 的时候调出键盘（自动触发 focus 事件的同时调出键盘）？...
UYOU 安卓我目前没有遇到问题.然后直接使用input.focus()是无法在ios中调起键盘的,因为ios中input元素的focus必须由事件触发.此外,如果模拟了触摸事件,但是在setTime ...
DIV焦点事件详解 --【focus和tabIndex】
添加 tabindex='-1' 属性: 默认:获取不到焦点事件(blur) 1 <div class="wl-product" id="wl-product&qu ...
reactinput聚焦事件_React focus 事件的坑
React 的 focus 事件实现有问题 React 的 focus 事件会冒泡,但是原生 DOM 的 focus 事件是不冒泡的: 原生 DOM 的 focusin 事件是会冒泡的,但是现在 Re ...
JQ focus blur focusin focuseout
2019独角兽企业重金招聘Python工程师标准>>> 查阅资料后发现通常默认情况下div是没有focusable属性的,因此在给div元素绑定了事件的时候,不管有没有聚集焦点,函数 ...
div,span等标签支持focus/blur事件
<div tabindex="0" hidefocus="true" onfocus='alert("得到焦点");' onblur= ...
JS焦点事件和事件冒泡
焦点事件 JS中focus事件获得焦点,blur失去焦点,这些事件默认情况下只有表单可以触发,如果想让div等元素触发需要加tabindex属性 <div class="list&qu ...
使用jQuery中trigger()方法自动触发事件
一.常用事件在页面加载完成时自动触发input的点击事件,在移动端可以实现自动弹出输入法,获得焦点 $("input").trigger("click") ...
JQuery 自己主动触发事件
经常使用模拟有时候,须要通过模拟用户操作,来达到单击的效果.比如在用户进入页面后,就触发click事件,而不须要用户去主动单击. 在JQuery中.能够使用trigger()方法完毕模拟操作.比如能 ...

：focus-within的冒泡触发

：focus-within的冒泡触发相关推荐

最新文章

热门文章