Firefox 中的拖动事件没有 e.clientX 或 e.clientY

Posted 2023-05-08

【中文标题】Firefox 中的拖动事件没有 e.clientX 或 e.clientY

【英文标题】：No e.clientX or e.clientY on drag event in Firefox

【发布时间】：2014-07-22 10:14:32

【问题描述】：

我已经使用 Angular 中的指令实现了一个简单的拖放系统。它在 Chrome 中运行良好，但 Firefox 不会在拖动事件中公开 event.clientX、event.clientY 属性（他们只是拒绝修复它）。

所以我正在寻找一个很好的替代方法来在拖动事件中公开这些属性：拖动事件的视觉反馈需要 x,y 坐标。

代码是 here - 在 Chrome 和 Firefox 中查看问题。

在 Chrome 中，在文件夹中拖动一个项目，您将看到相同的项目显示为鼠标跟随的视觉反馈，而不是在 Firefox 中（因为 Firefox 不支持 e.clientX 和 @ 987654327@ 在拖动事件中）。

问题就在这里（从第 45 行开始）：

.on('drag', function(e) 
    if (e.originalEvent.clientX) 
        el.css(
           'top': e.originalEvent.clientY + 10,
           'left': e.originalEvent.clientX + 10
        );
     else 
        el.css('display', 'none');
    
);

那么，在 Firefox 中，如何在拖动事件期间获取鼠标在屏幕上的位置（角度方式，我的意思是使用指令、没有全局变量或其他方式）？

【问题讨论】：

这能回答你的问题吗？ Why is event.clientX incorrectly showing as 0 in firefox for dragend event?

【参考方案1】：

您可以在 document 上连接到 dragover -- clientX 和 clientY 在那里暴露。 使用功能闭包不填充全局范围。这里更新了PLNKR（在 Chrome 和 FF 中测试）。

对js的改动：

.directive('mpDrag', function($timeout, $window, $document) 

    // keeping coordinates private and 
    // shared among all instances of the directive
    var mouseX, mouseY;

    $document.on("dragover", function(event)
      mouseX = event.originalEvent.clientX;
      mouseY = event.originalEvent.clientY;
    )

    return 
      ...
      link: function($scope, element, attrs) 
        ...
        $timeout(function() 

        ...
            .on('drag', function(e) 
              // just use mouseX, mouseY directely here
              // (btw. you should detect differently when to hide the element)
              console.log(mouseX, mouseY); 
              if (e.originalEvent.clientX) 
                el.css(
                  'top': mouseY,
                  'left': mouseX
                );
               else 
                el.css('display', 'none');
              
            );
        );
      
    ;
  )

【讨论】：

无论如何要在 Typescript 和 React 上执行此操作？

【参考方案2】：

您必须从文档本身借用拖动坐标：

var dragX = 0,
    dragY = 0;

element.on('dragstart', function(e) 
    document.ondragover = function(event) 
        event = event || window.event;
        dragX = event.pageX,
        dragY = event.pageY;
    ;
);

element.on('drag', function(e) 
    el.css(
        'top': dragY + 10,
        'left': dragX + 10
    );
);

Updated plunker