Question

我需要捕获下拉列表打开/释放事件以执行某些操作。可以通过选择选项，按ESC，然后单击其他位置或再次单击选择来完成发布。

我们无法使用任何lib，只需依赖纯JavaScript。到目前为止，我几乎有一个兼容的解决方案，但有一些我无法克服的小/随机问题。

示例：

<select opened='false' onmousedown="mousedownhandler(event, this), return true" onkeyup="keyuphandler(event), return true">
   <option> Op1 </option>
   <option> Op2 </option>
   <option> Op3 </option>
</select>

使用Javascript：

var expectMouseUp = false;
var objSelect = null;
onmousedownhandler = function(event, select) {
    if(select.getAttribute('opened') = 'false') {
        expectMouseUp = true;
        select.setAttribute('opened', true);
        objSelect = select;

        document.body.addEventListener('mouseup', mouseuphandler);
    }      
}
mouseuphandler = function() {
    // mouse up caused by the open mouse down
    if (expectMouseUp = true) {
        expectMouseUp = false;
        return;
    }

    if (objSelect && objSelect.getAttribute('opened' = 'true') {
         expectMouseUp = false;
         objSelect.setAttribute('opened', false);
         objSelect = null;
         document.body.removeEventListener('mouseup', mouseuphandler);
    }
}
keyuphandler = function() {
   if key == esc {
       if (objSelect && objSelect.getAttribute('opened' = 'true') {
            expectMouseUp = false;
            objSelect.setAttribute('opened', false);
            objSelect = null;
            document.body.removeEventListener('mouseup', mouseuphandler);
       }
   }
}

此实现在IE中运行良好。但Chrome和FireFox存在一些问题。

在Chrome中，当第一次打开下拉列表时，然后使用ESC关闭下拉列表，有时候，不会触发keyup事件。这不是一直存在的问题，如果下拉列表没有首次打开，则无法复制。

在FF中，当通过单击选择主体首次打开下拉列表时，不要移动鼠标并再次直接单击选择。下拉列表将被关闭，但不会触发第二个mouseup事件。再次错过了下拉发布活动。这也是一个随机问题，也不能第一次复制。

任何想法??

是否有适用于所有浏览器的兼容解决方案来监控选择下拉列表打开/释放事件

0 个答案: