Question

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

我准备了一个示例，当用户dragstart，鼠标位置正确时，结束dragend相同...但是如果你看一下drag的控制台，你会看到之前dragend负值。

是正常行为吗？为什么？我需要避免这个0值。任何解决方案？

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

Answer 1

在我对Firefox的测试中，drag元素只会触发0。并且，拖动事件阻止“mousemove”事件到达文档级别以便以此方式捕获它。

jsfiddle.net/qgedt70a /

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

可能是个错误。或者，我很好奇他们是否因某些奇怪的安全情况而禁用它？

了解HTML 5事件拖动

1 个答案: