gpt4 book ai didi

javascript - 了解 HTML 5 事件拖动

转载 作者:搜寻专家 更新时间:2023-10-31 21:49:01 25 4
gpt4 key购买 nike

我不明白为什么拖动事件中鼠标坐标clientX的返回值总是0或者在释放鼠标之前为负值。

我已经准备了一个例子,当用户 dragstart 时,鼠标位置是正确的,结束 dragend 也是一样...但是如果你查看 的控制台drag 您将在 dragend 之前看到一个负值。

是正常行为吗?为什么?我需要避免这个 0 值。有什么解决办法吗?

http://jsfiddle.net/gg8gLpg0/

  <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
#test {
position: absolute;
width: 100px;
height: 100px;
background-color:red;
}
</style>

</head>
<body>
<div id="test" draggable="true">test</div>
<script>
var elm = document.getElementById('test');

elm.addEventListener('drag', function (event) {
//console.log(event.clientX);
//console.log(event.clientY);
}.bind(this));

elm.addEventListener('dragstart', function (event) {
console.log('start');
console.log(event.clientX);
console.log(event.clientY);
}.bind(this));

elm.addEventListener('drag', function (event) {
console.log('during drag');// PROBLEM HERE
console.log(event.clientX);
console.log(event.clientY);
}.bind(this));

elm.addEventListener('dragend', function (event) {
console.log('end');
console.log(event.clientX);
console.log(event.clientY);
}.bind(this));


</script>

</body>
</html>

最佳答案

在我对 Firefox 的测试中,拖动元素仅触发 0。并且,拖动事件阻止了“mousemove”事件到达文档级别并以这种方式捕获它。

jsfiddle.net/qgedt70a/

Mozilla 的官方文档说 clientX 是拖动对象的本地坐标,而 screenX 是全局坐标,但是在我在上述 jsfiddle 的测试变体中,两者都从拖动事件返回 0。

可能是一个错误。或者,我很好奇他们是否出于某些奇怪的安全场景而禁用了它?

关于javascript - 了解 HTML 5 事件拖动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27156129/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com