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元素，您会注意到浏览器之间的不一致。当mousemove框打开时，Chrome甚至无法注册select。

＆＃13;

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

＆＃13;

div {
  margin: 1em;
}

table {
  border-spacing: 0px;
  font: 12px arial;
}

td, th {
  border: 1px solid #ddd;
  padding: 0.5em;
}

th {
  background: #def;
}
}

＆＃13;

<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>

＆＃13;

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

1 个答案: