如何仅在不使用鼠标单击时隐藏 html 元素

Question

我正在创建一个在线文件存储，用户可以在其中创建新文件和文件夹。所以我添加了两个按钮来创建文件和文件夹。单击其中一个按钮时，会出现一个输入字段，用于键入文件或文件夹的名称。通常输入字段是隐藏的。当用户单击按钮时，输入字段将被取消隐藏。如果用户单击页面中的其他位置，我还需要再次隐藏它。这是我到目前为止构建的代码。

<head>
<style>
    #divmain{
        display: flex;
        flex-direction: row;
    }
    #div1{
        background: antiquewhite;
        width: 30%;
        height: 800px;
        float: left;
    }
    #div2{
        background: black;
        width: 70%;
        height: 800px;
        float: right;
    }
    #input1{
        display:none;
        float:right;
        width:295px;
        height:44px;    
    }
   
</style>
</head>

<body onmousedown="buttonclick1()">
    <h1>cloud file directory</h1><br>

    <div id="divmain">

        <script>        
        function buttonclick1(){
            document.getElementById("input1").style.display="none"
        }        
        </script>

        <div id="div1">
            <button style="height:44px;width:50px;float:left;" onclick="document.getElementById('input1').style.display='block'"><a>Folder</a></button>
            <button style="height:44px;width:50px;float:left;" onclick="document.getElementById('input1').style.display='block'"><a>File</a></button>
            <input id="input1" type="text"><br><br>
            <hr style="border-top: 2px solid;">
        </div> 

        <div id="div2">  
        </div>  
    </div>    
</body>

在 div1 中添加了两个按钮。我使用 javascript 函数在检测到鼠标单击时隐藏输入字段。代码目前有效。

但问题是，即使在输入字段中单击鼠标，它也会隐藏输入字段。我需要将其隐藏以仅在输入字段外单击鼠标。我尝试使用 mouseover。但不知道如何将它应用到这里。有什么办法吗？

Answer 1

你可以监听 onblur https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onblur 当元素失去焦点时触发此事件

Answer 2

首先，我们需要一个 event 对象，其中包含有关点击事件的详细信息。然后我们用它来确定我们是否应该 hide/show 输入字段。

我们需要根据点击的元素过滤掉事件。这里我们可以使用输入框的id来区别于其他的点击。 target 对象包含引发事件的元素的详细信息。

使用它可以很容易地识别源元素。

<head>
<style>
    #divmain{
        display: flex;
        flex-direction: row;
    }
    #div1{
        background: antiquewhite;
        width: 30%;
        height: 800px;
        float: left;
    }
    #div2{
        background: black;
        width: 70%;
        height: 800px;
        float: right;
    }
    #input1{
        display:none;
        float:right;
        width:295px;
        height:44px;    
    }
   
</style>
</head>

<body onmousedown="buttonclick1(event)">
    <h1>cloud file directory</h1><br>

    <div id="divmain">

        <script>        
        function buttonclick1(e){
       if(e.target.id !== 'input1')
            document.getElementById("input1").style.display="none"
        }        
        </script>

        <div id="div1">
            <button style="height:44px;width:50px;float:left;" onclick="document.getElementById('input1').style.display='block'"><a>Folder</a></button>
            <button style="height:44px;width:50px;float:left;" onclick="document.getElementById('input1').style.display='block'"><a>File</a></button>
            <input id="input1" type="text"><br><br>
            <hr style="border-top: 2px solid;">
        </div> 

        <div id="div2">  
        </div>  
    </div>    
</body>

如何仅在不使用鼠标单击时隐藏 html 元素

How to hide a html element on mouse click only when not using it

javascript

html

input

mouseover

mouseclick-event