单击指定 DIV 以外的任何地方时隐藏 DIV

Question

我有一个输入字段，点击它会打开一个 DIV 标签。如果我点击这个 Div 上的任何地方，或者当我 select 来自 Div 的任何东西时，selection 进入输入字段并且 DIV 将是 closed.However 在 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

您可以执行以下操作：

function ClickoutsideObserver(target, onClickOutside) {
 
  document.addEventListener('click', handleClickOutside, true);
  
  function handleClickOutside(ev) {
    if (target !== ev.target) {
      onClickOutside && onClickOutside();
    }
  }
    
  return {
    dispose: function () {
      document.removeEventListener('click', handleClickOutside);
    }
  }
  
}

var trigger = document.querySelector('button');
var canvas = document.querySelector('.canvas');
var observer = null;


trigger.addEventListener('click', function () {
  observer = ClickoutsideObserver(canvas, handleClickOutside);
  canvas.classList.remove('canvas-hidden');
});

function handleClickOutside() {
  if (observer !== null) {
    observer.dispose();
    observer = null;
    canvas.classList.add('canvas-hidden');
  }
}

.canvas {
  height: 100px;
  width: 100px;
  background: tomato;
}

.canvas-hidden {
  display: none;
}

<button>Display</button>
  <div class="canvas canvas-hidden">
    I am the canvas
  </div>

Answer 2

在下面的代码中，我给出了 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>

单击指定 DIV 以外的任何地方时隐藏 DIV

Hide the DIV when clicking anywhere outside the specified DIV

javascript

java

jsp

dom-events