检测点击内部/外部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"）fadeOut，然后在“box”“window”fadeIn 外部点击？

感谢您的宝贵时间:)

Answer 1

您可以使用 jQuery focus 和 blur 事件处理程序来做到这一点，.box 在 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>

Answer 2

您可以在.box 上检测焦点/模糊事件，并且在这些事件处理程序中您可以采取适当的操作。

var boxEl = document.querySelector('.box');

boxEl.addEventListener('focus', function(e) {
  console.log('focused');
});

boxEl.addEventListener('blur', function(e) {
  console.log('blurred');
});

.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>

Answer 3

这可以在不使用脚本的情况下完成，这里结合:focus伪类和直接兄弟选择器+

注意，除了表单元素之外的元素要获得焦点，它需要tab-index 集合。

堆栈sn-p

.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;
  transition: opacity 1s;
}

.box:focus + .window {
  opacity: 0;
  transition: opacity 1s;
}

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