单击屏幕或任何元素以执行功能[重复]答案

【问题标题】：Click on the screen or any element to execute a function [duplicate]单击屏幕或任何元素以执行功能[重复]
【发布时间】：2020-03-05 18:16:53
【问题描述】：

如何反转函数，以便当我单击输入时，它会将 y 值转换为 -100%，当我单击屏幕上的其他位置或另一个元素时，它会反转，因此值返回到 0%。

我想用js而不是css来做

let movingName = document.querySelectorAll('.span-name');
let input = document.getElementsByTagName('input')

input[0].onclick = function() {
  movingName[0].style.transform = "translateY(-100%)";
}

.span-name {
  position: relative;
  color: black;
  bottom: 34px;
  left: 10px;
  font-size: 18px;
  padding: 2px;
  z-index: 1;
  pointer-events: none;
  display: block;
  width: fit-content;
  transition: 500ms;
}

<input type="email" name="email_config" required>
<span class="span-name">Email Configuration</span>

【问题讨论】：

stackoverflow.com/questions/152975/… 混合了非 jquery 解决方案
这是做作业的吗？
@HarryPehkonen no

标签： javascript html css input

【解决方案1】：

尝试使用主体来获取该点击事件并根据目标过滤事件。

let movingName = document.querySelectorAll('.span-name');
let input = document.getElementsByTagName('input')

document.getElementsByTagName('body')[0].onclick = function(e) {
    var tagName = e.target.tagName;
    if (tagName !== 'INPUT') {
        movingName[0].style.transform = "translateY(100%)";
    }
}    

input[0].onclick = function() {
  movingName[0].style.transform = "translateY(-100%)";
}

.span-name {
  position: relative;
  color: black;
  bottom: 34px;
  left: 10px;
  font-size: 18px;
  padding: 2px;
  z-index: 1;
  pointer-events: none;
  display: block;
  width: fit-content;
  transition: 500ms;
}

<div style="height:100vh; width:100vw">
    <input type="email" name="email_config" required>
    <span class="span-name">Email Configuration</span>
</div>

【讨论】：