IE11的組合框怪異行爲（錯誤） - 選擇錯誤的pageX和pageY值

Question

$(window).on('click', function(event) { 
     if (event.pageY < 10 && event.pageY < 10) { 
      alert('WTF?'); 
     } 
}); 

此代碼有什麼特別之處？沒有。
但是，當我選擇Combobox內的項目然後再次單擊它時，pageX和pageY座標的值相對於選擇的左上角而不是整個文檔。

這裏是captured video錯誤（？）再現。

有什麼解決方法嗎？

Answer 1

我還沒有專門測試組合框，但Chrome和IE在event.pageX和event.pageY中都顯示出奇怪的行爲，在打開的select元素中。

一個可能的解決方案是附加一個mousemove事件，並保存其event.pageX和event.pageY座標爲click事件中使用。

下面是一個代碼段，用於顯示事件座標mousedown，mouseup，click，和mousemove。對於select元素，您會注意到瀏覽器之間的不一致。當select框打開時，Chrome甚至不會註冊mousemove。

$(window).on('mousedown mouseup click mousemove', function(event) { 
 
    $('#'+event.type).html('<td>'+event.type+ 
 
         '<td>'+event.target+ 
 
         '<td>'+event.pageX+ 
 
         '<td>'+event.pageY 
 
         ) 
 
});

div { 
 
    margin: 1em; 
 
} 
 

 
table { 
 
    border-spacing: 0px; 
 
    font: 12px arial; 
 
} 
 

 
td, th { 
 
    border: 1px solid #ddd; 
 
    padding: 0.5em; 
 
} 
 

 
th { 
 
    background: #def; 
 
} 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <button>Test</button> 
 
    <select> 
 
    <option>Option 1 
 
    <option>Option 2 
 
    <option>Option 3 
 
    </select> 
 
</div> 
 
<hr> 
 
<table> 
 
    <tr><th>event.type<th>event.target<th>event.pageX<th>event.pageY 
 
    <tr id="click"> 
 
    <tr id="mouseup"> 
 
    <tr id="mousedown"> 
 
    <tr id="mousemove"> 
 
</table>