如何检查实际单击了哪个<option>？

Question

$('select').bind('click contextmenu',function(ev){    
})

ev.target总是一个select，而不是option。

我怎么知道现在点击的是哪一个？

我不能这么做：

$('option').bind('click contextmenu',function(ev){    
})

因为它在IE8中不受支持，所以您可以自己测试它！

它还应该支持右键单击，这会触发contextmenu事件。

Answer 1

<option>无法捕获IE中的事件。它没有独立的生命周期；在IE中，选择框是单个不可分割的OS小部件，因此单击一个选项总是会为<select>元素生成一个单击事件。

虽然理论上您可能猜到哪个选项是从event.clientY属性中单击的，但这将要求您准确地知道IE是如何呈现菜单的，包括哪些字体正在使用(在您的控制范围内)，以及弹出菜单是向下弹出还是向上弹出，还是在屏幕边缘与select元素(完全不在您的控制范围内)对齐。对于一个非常短的菜单，您可以希望它总是向下打开，并从那里计算，但它并不是真正可靠的。这几乎总是最好的让点击通过，只是看看哪个选项被选中之后。

至于oncontextmenu，算了吧。右键单击IE中的<option>什么也不做，没有生成任何事件供您捕捉。如果你想要正确点击菜单，你将不得不用一个基于JavaScript div的弹出模拟替换你的JavaScript。

Answer 2

我想一个解决方案可能是检查新的value of select：它应该是用户刚刚单击的来自option的那个。

或者您也可以检查您的selectedIndex属性:它还应该指向刚刚选择的option。

Answer 3

只需在select元素上使用val()-method：

$('select').bind('click contextmenu',function(ev){
    var value = $(this).val();
})

或：

$('select').change(function(ev){
    var value = $(this).val();
})