Question

我正在为ASP.Net开发一个自己的组合框控件，它应该像一个选择框，我使用文本框，按钮和div作为选择框的替代品。它工作正常，看起来像Image：

我现在的问题是Selectbox关闭行为：当点击打开的选择框外的任何地方时，它应该关闭所以我需要像整个页面上的onClick事件一样，只有在我的div打开时才会触发。有人建议怎么做？

Answer 1

向click添加document事件处理程序。在事件处理程序中，检查其target（或IE中的srcElement）属性，以检查它不是您的open div或其任何后代。

Answer 2

document.onclick = function() {
    if(clickedOutsideElement('divTest'))
        alert('Outside the element!');
    else
        alert('Inside the element!');

}

function clickedOutsideElement(elemId) {
    var theElem = getEventTarget(window.event);

    while(theElem = theElem.offsetParent) {
        if(theElem.id == elemId)
            return false;
    }

    return true;
}

function getEventTarget(evt) {
    var targ = (evt.target) ? evt.target : evt.srcElement;

    if(targ && targ.nodeType == 3)
        targ = targ.parentNode;

    return targ;
}

Answer 3

在文档上设置一个“关闭”伪组合框的单击事件处理程序。另外，在伪组合框的容器（在本例中为div）上设置一个click事件处理程序，它取消了事件的冒泡。然后div中的任何点击都会在停止之前冒泡到div，而其他地方的点击会一直冒泡到文档。

这比从事件的目标向上遍历DOM以找出点击来自哪里更容易。

编辑：如果你将div的样式设置为display: none;（或类似的东西）来隐藏它，那么将事件处理程序留在文档上并不重要 - 当它已经被隐藏时隐藏它没有效果。如果你想要非常整洁，那么在显示div时添加事件监听器，并在隐藏时删除它们;但是可能没有必要打扰。

Answer 4

放置一个覆盖整个页面的透明div，位于您的下拉列表中。在那个div的点击事件你的下拉列表。

整个页面的OnClick事件除了div

4 个答案: