javascript - 如何在 DIV 控件之外处理 DIV 上的 onClick？

Question

我有一个带有 id settingsDiv 的 DIV 和几个组合框，如果我单击窗口中的某个位置(当然，除了组合框之外)，我喜欢关闭窗口。 我使用以下 html 代码:

<div id="settingsDiv" onClick="javascript:closeSettings()">
<form id="settings">
Font size:
<select id="fontSizeFactor" size="1">    
  <option value="2.0">200%</option>
  <option value="1.75">175%</option>
  <option value="1.5">150%</option>
  <option value="1.25">125%</option>
  <option selected value="1.0">100%</option>
  <option value="0.75">75%</option>
  <option value="0.5">50%</option>
</select><br />
…
</div>

这个 JavaScript 函数:

function closeSettings() {
$('#settingsDiv').hide();
  }

问题是，如果我单击组合框，也会调用 closeSettings。 我应该如何更改代码，以便仅在单击组合框外部的窗口时才调用 closeSettings？

要查看此窗口打开 this page然后单击右上角的设置按钮(您现在只能通过再次单击设置窗口来关闭窗口)。

Answer 1

你的函数可以这样使用: 只需获取被点击的 div 的事件来检查其子级是否被点击或 div 自身被点击。

您还需要更改此行

<div id="settingsDiv" onClick="javascript:closeSettings()">

用这一行

<div id="settingsDiv" onClick="javascript:closeSettings(event)">

.. 您的更新功能是:

function closeSettings(event) {
   var id=event.target.id;//getting the clicked element id.
  if(id=="settingsDiv")
    $('#settingsDiv').hide();
  }