javascript - 检测点击内部/外部 div

Question

.container
{
  width:500px;
  height:500px;
  background-color:grey;
  }
.box
{
  width:150px;
  height:30px;
  background-color:white;
  position:relative;
  top:130px;
  left:10px;
  color:black;
  }
.window
{
  height:300px;
  width:250px;
  background-color:red;
  position:absolute;
  left:200px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="box" contenteditable="true">
  </div>
  <div class="window">
  </div>
</div>

你好，

我有一个问题，是否可以检测焦点并模糊成 div (class="box")。我想单击 div class="box"(当 div 处于事件状态时)和红色框(class="window")淡出，然后单击外部时“盒子” “窗口”淡入？

感谢您的宝贵时间:)

Answer 1

你可以使用 jQuery focus 和 blur 事件处理程序来做到这一点，.box on focus 它隐藏了 .window 和 blur 它显示 .window。

$(document).ready(function(){
	$('.box').on('focus',function(){
  	$('.window').hide(200);
  });
  $('.box').on('blur',function(){
  	$('.window').show(200);
  });
});

.container
{
  width:500px;
  height:500px;
  background-color:grey;
  }
.box
{
  width:150px;
  height:30px;
  background-color:white;
  position:relative;
  top:130px;
  left:10px;
  color:black;
  }
.window
{
  height:300px;
  width:250px;
  background-color:red;
  position:absolute;
  left:200px;
  }
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="box" contenteditable="true">
  </div>
  <div class="window">
  </div>
</div>