检测点击内部/外部div

Posted 2023-03-10

【中文标题】检测点击内部/外部div

【英文标题】：Detect click inside/outside div

【发布时间】：2016-11-12 10:28:26

【问题描述】：

.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 外部点击？

感谢您的宝贵时间:)

【参考方案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>

【讨论】：

欢迎@PiotrS :-)，这甚至可以使用 CSS 和 javascript 来实现。由其他开发者提供。

【参考方案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>

【参考方案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>

【讨论】：

@PiotrS 我可以问一下，既然可以用 CSS 完成脚本，为什么还要使用脚本？ ...这是错误的方法

几个月前我开始了我的javascript css冒险，我认为使用脚本更好

@PiotrS 不，不是，你不能用脚本替换 CSS 的东西 .. 或者相反。如果您开始将脚本用于所有内容，脚本会减慢您的页面速度