javascript - 单击屏幕或任何元素以执行功能

Question

如何反转函数，以便当我单击输入时，它会将 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>

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