如何在drop事件Javascript / Jquery中获取鼠标坐标

时间:2014-04-05 08:26:36

标签: javascript jquery mouseevent

我只是未定义:

 myele.bind('drop', function (e) {
            console.log("Dropped");
            if (e.pageX || e.pageY) {
               //store
            }
            else if (e.clientX || e.clientY) {
               //store
            }
            console.log("XPOS: " + e.clientX + " YPOS: " + e.pageY);
            return false;
        });

输出:

掉落 XPOS:未定义YPOS:未定义

修改

http://jsfiddle.net/fBT7X/2/

1 个答案:

答案 0 :(得分:1)

jQuery将原始drop事件包装到名为originalEvent的属性中,因此您必须访问该事件才能获取页面/客户端属性

myele.bind('drop', function (e) {
   console.log("Dropped");
   if (e.originalEvent.pageX || e.originalEvent.pageY) {
      //store
   }
   else if (e.originalEvent.clientX || e.originalEvent.clientY) {
      //store
   }
   console.log("XPOS: " + e.originalEvent.clientX + " YPOS: " + e.originalEvent.pageY);
   return false;
});

JSFIDDLE DEMO将绿色框拖动到红色框

如果在您认为具有所需内容的对象上获得未定义,请将该对象记录到控制台并查看它。在这种情况下,只需记录事件对象并查看属性

console.log(e);
   jQuery.Event {originalEvent: MouseEvent, type: "drop", isDefaultPrevented: function, timeStamp: 1396687578486, jQuery110104013205280061811: true…}
   altKey: false
   bubbles: true
   cancelable: true
   ctrlKey: false
   currentTarget: div#e
   data: null
   delegateTarget: div#e
   eventPhase: 2
   handleObj: Object
   isDefaultPrevented: function returnFalse() {
   jQuery110104013205280061811: true
   metaKey: false
   originalEvent: MouseEvent <---
      altKey: false
      bubbles: true
      button: 0
      cancelBubble: false
      cancelable: true
      charCode: 0
      clientX: 24   <---
      clientY: 64   <---
      ...
   relatedTarget: null
   ...