Question

我在asp.net中有一个用户控件，它输出类似于以下内容的标记：

<div id="combobox1">
  <div id="combobox1_text"><span>combobox 1</span></div>
  <div id="combobox1_ddl">
    <input type="checkbox" id="combobox1_$1" />
    <label for="combobox1_$1">Item 1</label>
    <br />
    <input type="checkbox" id="combobox1_$2" />
    <label for="combobox1_$2">Item 2</label>
    <br />
    <input type="checkbox" id="combobox1_$3" />
    <label for="combobox1_$3">Item 3</label>
    <br />
    <input type="checkbox" id="combobox1_$4" />
    <label for="combobox1_$4">Item 4</label>
    <br />
    <input type="checkbox" id="combobox1_$5" />
    <label for="combobox1_$5">Item 5</label>
    <br />
  </div>
</div>

此控件附带的javascript文件具有以下类（仅用于重现问题的最小代码）：

ComboBox = function(cb) {
  var pnlContainer = document.getElementById(cb);
  var pnlComboBox = document.getElementById(cb + '_text');
  var pnlDropdownList = document.getElementById(cb + '_ddl');
  var isCollapsed = true;

  var collapseDropdown = function() {
    if (!isCollapsed) {
      isCollapsed = true;
      pnlDropdownList.style.display = 'none';
      //-- some more custom handling code follows here --
    }
  };
  pnlComboBox.onclick = function() {
    isCollapsed = !isCollapsed;
    pnlDropdownList.style.display = (isCollapsed) ? 'none' : 'block';
  };
  pnlContainer.onclick = function(event) {
    event.stopPropagation();
  };
  document.addEventListener('click', function() {
    collapseDropdown();
  }, false);
}

最后，在我的页面上，我创建了一个类的实例：

cb1 = new ComboBox('combobox1');

所有这一切都正常，直到只有一个控件实例。只要按照预期，只要点击控件外的任何地方或任何地方，它就会正确折叠。

问题：

如果页面上有多个此控件实例，则会出现此问题。如果其中一个组合框是打开的，并且用户点击了我的组合框的另一个实例，则前一个组合框不会崩溃。

JsFiddle可以在这里找到重现问题的最小代码：

https://jsfiddle.net/x8qjo79f/

我知道这是因为event.stopPropagation()来电，但不知道该怎么做。

Answer 1

您可以在pnlContainer.onclick中允许事件传播，但请记住单击了ComboBox。在文档单击事件处理程序中，您将测试ComboBox是否是单击的，并且仅在不是时才允许折叠。

对Javascript代码的更改可能如下所示：

ComboBox = function(cb) {
  var isClicked = false;
  ...
  pnlContainer.onclick = function(event) {
    isClicked = true;
  };
  document.addEventListener('click', function() {
    if (isClicked) {
      isClicked = false;
    }
    else {
      collapseDropdown();
    }
  }, false);
}

Answer 2

编辑文档onclick事件监听器以捕获事件（因此它在冒泡阶段之前执行）并在其目标位于组合框之外时折叠。

ComboBox = function(cb) {
  var pnlContainer = document.getElementById(cb);
  var pnlComboBox = document.getElementById(cb + '_text');
  var pnlDropdownList = document.getElementById(cb + '_ddl');
  var isCollapsed = true;

  var collapseDropdown = function() {
    if (!isCollapsed) {
      isCollapsed = true;
      pnlDropdownList.style.display = 'none';
      //-- some more custom handling code follows here --
    }
  };
  pnlComboBox.onclick = function() {
    isCollapsed = !isCollapsed;
    pnlDropdownList.style.display = (isCollapsed) ? 'none' : 'block';
  };
  pnlContainer.onclick = function(event) {
    event.stopPropagation();
  };

  // Edit: Capture click event
  document.addEventListener('click', function(event) {
    if (!pnlContainer.contains(event.target)) collapseDropdown();
  }, true);
}

cb1 = new ComboBox('combobox1');
cb2 = new ComboBox('combobox2');

#combobox1,
#combobox2 {
  border: 1px solid black;
  cursor: default;
  width: 200px;
  font-family: verdana;
  font-size: 10pt;
}

#combobox1_text,
#combobox2_text {
  padding: 2px;
}

#combobox1_ddl,
#combobox2_ddl {
  border-top: 1px solid black;
  display: none;
}

<div id="combobox1">
  <div id="combobox1_text"><span>combobox 1</span></div>
  <div id="combobox1_ddl">
    <input type="checkbox" id="combobox1_$1" />
    <label for="combobox1_$1">Item 1</label>
    <br />
    <input type="checkbox" id="combobox1_$2" />
    <label for="combobox1_$2">Item 2</label>
    <br />
    <input type="checkbox" id="combobox1_$3" />
    <label for="combobox1_$3">Item 3</label>
    <br />
    <input type="checkbox" id="combobox1_$4" />
    <label for="combobox1_$4">Item 4</label>
    <br />
    <input type="checkbox" id="combobox1_$5" />
    <label for="combobox1_$5">Item 5</label>
    <br />
  </div>
</div>
<br />
<input type="text" />
<br />
<input type="button" />
<br />
<input type="checkbox" />
<br />
<span>some random text in the document.. <br />blah. blah.. blah..</span>
<br />
<br />
<br />
<div id="combobox2">
  <div id="combobox2_text"><span>combobox 2</span></div>
  <div id="combobox2_ddl">
    <input type="checkbox" id="combobox2_$1" />
    <label for="combobox2_$1">Item 1</label>
    <br />
    <input type="checkbox" id="combobox2_$2" />
    <label for="combobox2_$2">Item 2</label>
    <br />
    <input type="checkbox" id="combobox2_$3" />
    <label for="combobox2_$3">Item 3</label>
    <br />
    <input type="checkbox" id="combobox2_$4" />
    <label for="combobox2_$4">Item 4</label>
    <br />
    <input type="checkbox" id="combobox2_$5" />
    <label for="combobox2_$5">Item 5</label>
    <br />
  </div>
</div>

使用纯Javascript显示/隐藏Combobox下拉列表

2 个答案: