检测下拉菜单打开答案

【问题标题】：Detect drop down openes检测下拉菜单打开
【发布时间】：2013-10-15 17:44:15
【问题描述】：

有什么方法（在普通的 JS 或 jQuery 中）可以准确地检测到那一刻，下拉（选择标签）打开了吗？为了澄清更多，一个小例子：

如果您在某个选择上单击 5 次，则会发生以下情况：

drop down opens   > Event should fire
drop down closes
drop down opens   > Event should fire
drop down closes
drop down opens   > Event should fire

到目前为止，我只能找到 click/focus in/focus out 的事件。

【问题讨论】：

不，我不相信有open 事件； focus 可能是你能得到的最好的。
onchange, mousedown(?) & click
我不认为有办法...查看此链接到一个类似的问题，他认为这是不可能的。 stackoverflow.com/questions/2709474/…
所以像kendo ui这样的ui框架已经实现了这样的事件kendoui.com

标签： javascript jquery

【解决方案1】：

看看这段代码：

HTML：

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js">
</script>
<select id="fire">
    <option>One</option>
    <option>Two</option>
</select>
<p></p>

JQuery:

var flag=1;
$("#fire").click(function(){
    if(flag==1){
         $("p").append("clicked   ");
        flag=0;
    } else {
         flag=1;   
    }
});
$("#fire").blur(function(){
         flag=1; 
});

jsFiddle is here

【讨论】：

我也是这样做的。它失败了，如果您只是通过单击页面上的某个位置来取消选择焦点，请期待选择。

【解决方案2】：

var select = document.getElementById('mySelect');

mySelect.addEventListener('mousedown', function() {
    console.log('mousedown event fired on mySelect');
});

看到这个小提琴：http://jsfiddle.net/ToddT/hYT9q/

【讨论】：

那行不通。它还捕获了下拉列表的关闭。 OP只想要开口
真的吗？唔。这不是我在 Chrome 中测试它的时候。至少，我认为它没有...只是再次检查它，至少在 Chrome 中，它没有捕获关闭。 YMMV。
它适合我的 chrome。如果您单击下拉菜单，则不一定，但如果您反复单击小箭头，则打开和关闭都会触发
啊，好吧。我正在选择一个选项，而不是重复单击选择箭头。

【解决方案3】：

扩展来自@Todd 的答案

var select = document.getElementById('mySelect');

mySelect.addEventListener('mousedown', function() {
    if( $(this).attr("data-IsOpen") == 1 ){
      $(this).attr("data-IsOpen", 0); //it's closed
    }else{
      $(this).attr("data-IsOpen", 1); //it's open
    }
    var isOpen = ($(this).attr("data-IsOpen") == 1); //should give true or false
    console.log(isOpen);
});

我们正在做的是给元素添加一些属性，在这种情况下，当你第一次点击一个选择元素时，它会询问它的 data-IsOpen 属性，因为它不存在，我们将它初始化为一个 1，表示选择是打开的。

当我们再次点击它时，我们问同样的问题，现在它是打开的，我们将属性更新为 0，表示它是关闭的。

希望这会有所帮助，干杯。

【讨论】：

它失败了，如果您通过单击页面上的某个位置来取消选择焦点，请期待选择。
哇，快！好吧，AFAIK 没有事件可以检测到那个精确的时刻，但是你应该用 mousedown、up、mouseenter、leave 做标志，有一个古老的 SO 问题stackoverflow.com/questions/2709474/… 看看。干杯！