Javascript 理解HTML5事件拖动_Javascript_Jquery_Html_Drag And Drop

Javascript 理解HTML5事件拖动

javascript jquery html

Javascript 理解HTML5事件拖动,javascript,jquery,html,drag-and-drop,Javascript,Jquery,Html,Drag And Drop,我不明白为什么在释放鼠标之前，事件拖动中鼠标坐标clientX的返回值总是0或负值我准备了一个例子，当用户dragstart时，鼠标位置是正确的，对于enddragend。。。但是，如果您查看控制台上的拖动，您将在拖动之前看到一个负值这是正常的行为吗？为什么？我需要避免这个0值。有什么解决办法吗 #试验{ 位置：绝对位置；宽度：100px；高度：100px；背景色：红色； } 测试 var elm=document.getElementById（'test'）； elm.addEv

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

我准备了一个例子，当用户

dragstart

时，鼠标位置是正确的，对于end

dragend

。。。但是，如果您查看控制台上的

拖动

，您将在

拖动之前看到一个负值
这是正常的行为吗？为什么？我需要避免这个0值。有什么解决办法吗


#试验{
位置：绝对位置；
宽度：100px；
高度：100px；
背景色：红色；
}
测试
var elm=document.getElementById（'test'）；
elm.addEventListener（'drag'，函数（事件）{
//console.log（event.clientX）；
//console.log（event.clientY）；
}.约束（这个）；
elm.addEventListener（'dragstart'，函数（事件）{
console.log（'start'）；
console.log（event.clientX）；
console.log（event.clientY）；
}.约束（这个）；
elm.addEventListener（'drag'，函数（事件）{
console.log（'during drag'）；//这里有问题
console.log（event.clientX）；
console.log（event.clientY）；
}.约束（这个）；
elm.addEventListener（'dragend'，函数（事件）{
console.log（'end'）；
console.log（event.clientX）；
console.log（event.clientY）；
}.约束（这个）；
在我对Firefox的测试中，drag元素只触发0。
而且，拖动事件阻止了“mousemove”事件到达文档级别，从而以这种方式捕获它
jsfiddle.net/qgedt70a/
Mozilla的官方文档说clientX是拖拽对象的本地坐标，screenX是全局坐标，但是在我在上述JSFIDLE测试的变体中，两者都从拖拽事件返回0
可能是个虫子。或者，我很好奇他们是否因为一些奇怪的安全场景而禁用了它？
有些东西告诉我你不能，但是为什么不检查if（event.clientX<0）看看它是否为负值，如果是，就返回。@adeneo谢谢你的帮助，但为什么呢？一个bug？@adeneo什么是事件拖动的替代方案？我不知道为什么会是这样，我认为没有替代的事件，你可能只需要解决它。
  <!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>