首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >在web浏览器中,onblur和onfocusout有什么不同?

在web浏览器中,onblur和onfocusout有什么不同?
EN

Stack Overflow用户
提问于 2011-10-13 21:43:14
回答 3查看 42.6K关注 0票数 77

如果它们是一样的,为什么会有两个这样的事件呢?

EN

回答 3

Stack Overflow用户

发布于 2020-05-16 16:04:11

当元素即将失去焦点时,会触发focusout事件。

此事件和模糊之间的主要区别是聚焦气泡,而模糊则不是。大多数情况下,它们可以互换使用。

票数 1
EN

Stack Overflow用户

发布于 2015-12-29 19:41:22

The Jquery documentation has a good focusout vs. blur demo,为了清楚起见,我将在下面重现它。简而言之,如果选择器--演示中的$('p') --是包括输入和父元素在内的任何元素,就会触发focusout。然而,只有当选择器在inputs $('input')上时,blur才会触发。

代码语言:javascript
复制
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>focusout demo</title>
  <style>
  .inputs {
    float: left;
    margin-right: 1em;
  }
  .inputs p {
    margin-top: 0;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<div class="inputs">
  <p>
    <input type="text"><br>
    <input type="text">
  </p>
  <p>
    <input type="password">
  </p>
</div>
<div id="focus-count">focusout fire</div>
<div id="blur-count">blur fire</div>

<script>
var focus = 0,
  blur = 0;
$( "p" )
  .focusout(function() {
    focus++;
    $( "#focus-count" ).text( "focusout fired: " + focus + "x" );
  })
  .blur(function() {
    blur++;
    $( "#blur-count" ).text( "blur fired: " + blur + "x" );
  });
</script>

</body>
</html>
票数 0
EN

Stack Overflow用户

发布于 2021-10-03 20:56:35

一个小小的演示。请注意,focusin/focusout的父div更改了它的颜色。

代码语言:javascript
复制
div {
  background-color: #eee;
  padding: 5px;
}
代码语言:javascript
复制
<div onfocusin="this.style['background-color']='#efe'"
     onfocusout="this.style['background-color']='#eef'">
  <input onfocusin="this.value='focusin'" 
         onfocusout="this.value='focusout'"
         placeholder="focusin/focusout" /> bubbling
</div>

<div onfocus="this.style['background-color']='#efe'" 
     onblur="this.style['background-color']='#eef'">
  <input onfocus="this.value='focus'" 
         onblur="this.value='blur'"
         placeholder="focus/blur" /> not bubbling
</div>

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/7755052

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档