在 Canvas 上使用 Dojo DND 时无法在 Chrome 中获取 xy 坐标

Question

我有一个使用 Dojo 框架 (1.12.1) 的项目，并且 JQuery (2.1.4)。我正在使用 Dojo DND（拖放）功能，但我需要在 canvas 元素中找到一个 XY 偏移量 DND 目标掉落。我可以在鼠标弹起事件上使用 JQuery 在 Firefox、Safari 中收集偏移量，它确实在 Chrome 51.0.2704.84 中工作，但这在 Chrome 56.0.2924.87、IE 或触摸屏（平板电脑、手机）上对我不起作用。

我需要找到一种方法来获取 canvas 中的 XY 坐标至少 Chrome 作为拖放的目标以及火狐。不知道是不是忽略了里面的东西 Dojo 将执行此操作，或者在 JQuery 中，或者如果特定于浏览器必须完成。

我正在处理的应用程序位于 https://avida-ed.beacon-center.org/app/AvidaED.html

我有一个显示问题的 JSFiddle：https://jsfiddle.net/56bcrk5s/5/

require(['dojo',
    "dojo/dnd/Source",
    "dojo/dnd/Target",
    "dojo/dnd/Manager",
    "dojo/domReady!"
    ], function(dojo, dndSource, dndTarget, dndManager) 
{
    var theList = new dndSource('theList', {
    accept: ['b', 'v', 'd'],singular: true, 
    copyOnly: true, selfAccept: false
    });
    theList.insertNodes(false, [
        {data: 'Rusty', type:['d']},
        {data: 'Farli', type:['v']},
        {data: 'Ritka', type:['v']},
        {data: 'Beka', type:['d']}
    ]);
    myTarget = new dndTarget('myTarget', {accept: ['d', 'v']});
    var xy=[];

    $(document).on('mouseup', function(evt) {
        xy = [evt.offsetX, evt.offsetY];
    });
    myTarget.on('DndDrop', function (source, nodes, copy, target) {
        if ('myTarget' == target.node.id) {
            console.log(nodes[0].textContent,' at ', xy);
            output.textContent = nodes[0].textContent 
                +' at ' + xy[0] +', '+xy[1];
        }
    });
    console.log('dom is ready');
});

Answer 1

Chrome 的更新版本不再通过 "mouseup" 提供所需的偏移量。相关事件现在是 "pointerup"。我已经在 JSFiddle 中对此进行了测试，它现在可以在 Chrome 中使用。添加此处理程序：

$(document).on('pointerup', function(evt) {
    console.log("pointerup evt", evt);
    xy = [evt.originalEvent.offsetX, evt.originalEvent.offsetY];    
});

您应该会在 console.log 输出中看到相关的偏移量。我还没有用 Firefox 测试它，所以你可能需要根据浏览器检测设置处理程序。

在 Canvas 上使用 Dojo DND 时无法在 Chrome 中获取 xy 坐标

Trouble getting xy coordinates in Chrome when using Dojo DND onto a Canvas

javascript

jquery

dojo

drag-and-drop

mouseup