0

我有一个输入字段，单击它会打开一个 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>

显示和隐藏 DIV 的 Javascript：

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 库。

4

2 回答 2

0

您可以执行以下操作：

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>

于 2020-05-19T20:40:17.953 回答
0

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

于 2020-05-20T04:34:43.837 回答