event.clientX showing as 0 in firefox for dragend event

问题

function move(e,obj,but){
    if(typeof(obj) === 'string'){
        obj = document.getElementById(obj) ;
    }

    if(typeof(but) === 'string'){
        but = document.getElementById(but) ;
    }

    //elementCoord(but) ;//get the current coords of the button &
    elementCoord(obj) ;//the container

    e = e || window.event ;
    var mouseX = e.clientX ;
    var mouseY = e.clientY ;

    //alert('mouseX='+mouseX+', but.XCoord '+but.XCoord) ;
    var diffX = Math.abs(obj.XCoord - mouseX) ;
    var diffY = Math.abs(obj.YCoord - mouseY) ;

    but.addEventListener("dragend",function(evt){
        evt = evt || window.event ;
        mouseX = evt.clientX ;
        mouseY = evt.clientY ;
        obj.style.left = mouseX - diffX + 'px';
        obj.style.top = mouseY - diffY + 'px';
        alert('mouseX='+mouseX+' diffX='+diffX) ;
        }
    ,false) ;

}

The alert from dragend is showing mouseX as zero no matter where it is currently. This works fine in Chrome so not sure what im doing wrong.

Forgot to mention, elementCoord just gets the offset of an object adding it as a property. It works fine in all browsers.

回答1:

Don't use e.clientX or e.clientY

Use e.pageX and e.pageY or e.targetTouches[0].pageX e.targetTouches[0].pageY (for Touchscreens) instead.

pageX is referring to the document, clientX to the viewport. See also:

https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/pageX https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientX

回答2:

I ran into the same issue with Firefox the other day.

I managed to find a work around although it depends on using a global variable for storing the mouse before and after positions.

The bit that seemed to get things working was to get the pageX and pageY values from the ondrop event instead of the ondragend event.

The only problem is that the ondrop doesn't store the dragged element or the original mouse positions (hence the need for the global variable).

var dragDetails = {
   target: null,
   orgMouseX: 0,
   orgMouseY: 0,
   desMouseX: 0,
   desMouseY: 0
}

$("targetElement").on("dragstart", function(event) {
   dragDetails.target = this;
   dragDetails.orgMouseX = event.originalEvent.pageX;
   dragDetails.orgMouseY = event.originalEvent.pageY;
});

$("html").on("drop", function(event) {
   dragDetails.desMouseX = event.originalEvent.pageX;
   dragDetails.desMouseY = event.originalEvent.pageY;
   handleDrag();
});

Here is an example in a fiddle : https://jsfiddle.net/L1b6uz2d/2/

It seems to work on the latest versions of Chrome, Firefox, Edge and Internet Explorer (the accuracy isn't as good on Internet Explorer though) and it works on Android Chrome. Haven't tested any others yet and I'm sure the code can be improved.

I did manage to get it working without the need for a global variable but I had to use the ondrop and then pass the target, pageX and pageY as parameters to the ondragend event (I didn't include a fiddle because the code was very ugly)

回答3:

document.addEventListener("dragover", function( event ) { event.preventDefault(); console.log(event.pageX) }, false);

add console.log (event.pageX) in dragover Listener http://jsfiddle.net/zfnj5rv4/

来源：https://stackoverflow.com/questions/11656061/event-clientx-showing-as-0-in-firefox-for-dragend-event