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 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();
  }

Answer 2

单击组合框event.stoppropagation(); event.preventdefault();时，可以在函数中尝试这些方法。也许它会起作用。

如何处理DIV上控件外的DIV？

2 个答案: