检测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。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

请注意，要使表单元素以外的元素获得焦点，需要设置tab-index。

Stack snippet

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

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

＆＃13;

＆＃13;

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

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;