IE11的组合框怪异行为（错误） - 选择错误的pageX和pageY值

问题描述：

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

此代码有什么特别之处？没有。
但是，当我选择Combobox内的项目然后再次单击它时，pageX和pageY坐标的值相对于选择的左上角而不是整个文档。IE11的组合框怪异行为（错误） - 选择错误的pageX和pageY值

这里是captured video错误（？）再现。

有什么解决方法吗？

答

我还没有专门测试组合框，但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>

IE11的组合框怪异行为（错误） - 选择错误的pageX和pageY值

相关推荐