javascript - 单击指定 DIV 之外的任意位置时隐藏 DIV

Question

我有一个输入字段，单击该输入字段会打开一个 DIV 标签。如果我单击此 Div 上的任意位置，或者当我从 Div 中选择任何内容时，选择内容将转到输入字段，并且 DIV 将关闭。但是，在 DIV 打开后，我单击 DIV 之外的任意位置，我希望关闭 DIV。我尝试使用 event.target.id 但它不会给我其他元素的 id。它只是让我一片空白。

JSP代码:

<div class="mRow">
<label for="SS">Special Subjects:</label>
<span class="numLbls">1. </span><input type="text" name="ade" value="<%=ade[0]%>" size="6" maxlength="6" onclick="showCodeLookup(this, 'divSpec')"/>
<span class="numLbls">2. </span><input type="text" name="ade" value="<%=ade[1]%>" size="6" maxlength="6" onclick="showCodeLookup(this, 'divSpec')"/>
<span class="numLbls">3. </span><input type="text" name="ade" value="<%=ade[2]%>" size="6" maxlength="6" onclick="showCodeLookup(this, 'divSpec')"/>
</div>
This is the DIV
<div id="divSpec" class="lookupTable" onClick="hideThis(this.id)">
    <table>
        <%
        for (int i = 0; i < luSpec.size(); i++)
        {
            lu = (LookupTableBean) luSpec.get(i);
            %>
            <tr>
                <td><%=lu.getCode()%>.</td>
                <td><a href="javascript: setCode('divSpec', '<%=lu.getCode()%>')" ><%=lu.getDescr()%></a></td>
            </tr>
        <%
        }%>
    </table>
</div>

Javascript 显示和隐藏 DIV:

function showCodeLookup(el, divName)
{
  //Hide any lookup tables that are displayed first
  document.getElementById("divSpec").style.display="none";

  var divCodes = document.getElementById(divName);

  computeCoordinates();

  codeEl = el;

  divCodes.style.display="block";
  divCodes.style.top='1000px';
  divCodes.style.left='1000px';

}
function hideThis(id)
{
  document.getElementById(id).style.display="none";
}


document.onclick = function(e){
alert(e.target.id); --this is always blank
};

但这总是给我一片空白。 我使用的是纯 JavaScript，没有 jQuery 库。

Answer 1

在下面的代码中我给出了 id="mRow"这样，当您使用它单击任何输入时，我们可以检查单击的事件是否发生在 <div id="mRow"></div> 内。如果它在那里显示你的div，否则我检查是否 divSpec如果用户单击 divSpec 之外的区域，则您可以隐藏或显示该内容。它会隐藏起来。

演示代码:

function showCodeLookup(el, divName) {
  //Hide any lookup tables that are displayed first
  document.getElementById("divSpec").style.display = "none";

  var divCodes = document.getElementById(divName);

  codeEl = el;

  divCodes.style.display = "block";
  divCodes.style.top = '100px';
  divCodes.style.left = '100px';

}



document.onclick = function(e) {
  //checking if event where clicked occur is isnside your div
  if (document.getElementById('mRow').contains(e.target)) {
    console.log('Inside clicked'); //it is inside
  } else {
    if ((e.target.id) == 'divSpec') {
      console.log("div is clicked hide or show")

    } else {
      console.log('Outside clicked');
      //hiding the div
      document.getElementById("divSpec").style.display = "none";
    }
  }
};

function hideThis(id) {
  document.getElementById(id).style.display = "none";
}

.lookupTable {
  display: none;
  padding: 5px;
  z-index: 10;
  font-size: 10px;
  position: absolute;
  border: 2px solid blue;
  width: 220px;
  height: 180px;
}

<div id="mRow" class="mRow">
  <label for="SS">Special Subjects:</label>
  <span class="numLbls">1. </span><input type="text" name="ade" value="<%=ade[0]%>" size="6" maxlength="6" onclick="showCodeLookup(this, 'divSpec')" />
  <span class="numLbls">2. </span><input type="text" name="ade" value="<%=ade[1]%>" size="6" maxlength="6" onclick="showCodeLookup(this, 'divSpec')" />
  <span class="numLbls">3. </span><input type="text" name="ade" value="<%=ade[2]%>" size="6" maxlength="6" onclick="showCodeLookup(this, 'divSpec')" />
</div>
This is the DIV
<div id="divSpec" class="lookupTable" onClick="hideThis(this.id)">
  <table>
    <%
        for (int i = 0; i < luSpec.size(); i++)
        {
            lu = (LookupTableBean) luSpec.get(i);
            %>
      <tr>
        <td>
          <%=lu.getCode()%>.</td>
        <td>
          <a href="javascript: setCode('divSpec', '<%=lu.getCode()%>')">
            <%=lu.getDescr()%>
          </a>
        </td>
      </tr>
      <%
        }%>
  </table>
</div>