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

我怎样才能反转一个函数，当我点击一个输入时，它将y值转换为-100%，当我点击屏幕上的其他地方或另一个元素时，它将反转，使值返回到0%

我想用js而不是css来做

let movingName=document.querySelectorAll（'.span name'）；
让输入=document.getElementsByTagName（'input'）
输入[0]。onclick=function（）{
movingName[0].style.transform=“translateY（-100%）”；
}

.span名称{
位置：相对位置；
颜色：黑色；
底部：34px；
左：10px；
字号：18px；
填充：2px；
z指数：1；
指针事件：无；
显示：块；
宽度：适合的内容；
过渡时间：500ms；
}

电子邮件配置

尝试使用正文获取单击事件，并根据目标筛选事件

let movingName=document.querySelectorAll（'.span name'）；
让输入=document.getElementsByTagName（'input'）
document.getElementsByTagName（'body'）[0]。onclick=function（e）{
var标记名=e.target.tagName；
如果（标记名！=“输入”）{
movingName[0].style.transform=“translateY（100%）”；
}
}    
输入[0]。onclick=function（）{
movingName[0].style.transform=“translateY（-100%）”；
}

.span名称{
位置：相对位置；
颜色：黑色；
底部：34px；
左：10px；
字号：18px；
填充：2px；
z指数：1；
指针事件：无；
显示：块；
宽度：适合的内容；
过渡时间：500ms；
}

电子邮件配置

尝试使用body获取单击事件，并根据目标筛选事件

let movingName=document.querySelectorAll（'.span name'）；
让输入=document.getElementsByTagName（'input'）
document.getElementsByTagName（'body'）[0]。onclick=function（e）{
var标记名=e.target.tagName；
如果（标记名！=“输入”）{
movingName[0].style.transform=“translateY（100%）”；
}
}    
输入[0]。onclick=function（）{
movingName[0].style.transform=“translateY（-100%）”；
}

.span名称{
位置：相对位置；
颜色：黑色；
底部：34px；
左：10px；
字号：18px；
填充：2px；
z指数：1；
指针事件：无；
显示：块；
宽度：适合的内容；
过渡时间：500ms；
}

电子邮件配置

mixIs中有非jquery解决方案这是家庭作业吗？@HarryPehkonen否mixIs中有非jquery解决方案这是家庭作业吗？@HarryPehkonen否