Question

我正在尝试使用cytoscape.js构建一个跨平台工具，其中包括移动设备，但在使用“tap”功能添加节点时我遇到了一些问题：

cy.on('tap', function(e) {
    if(e.cyTarget === cy) {
        if($("input:radio[id=btnAddNode]")[0].checked) {
            var idNum = cy.nodes().size(),
            setID = idNum.toString(),
            offset = $cy.offset(),
            position = {
                x: e.originalEvent.x - offset.left,
                y: e.originalEvent.y - offset.top
            };
            console.log("e.originalEvent.x: " + e.originalEvent.x);
            console.log("offset.left: " + offset.left);
            console.log("e.originalEvent.y: " + e.originalEvent.y);
            console.log("offset.top: " + offset.top);
            cy.add([{
                group: "nodes",
                data: {
                    id: "n" + setID
                },
                renderedPosition: {
                    x: position.x,
                    y: position.y
                },
            }]);                    
        } else {
        //show node data
        }
    }
});

在Chrome for Windows 7（v.32）以及Safari上，它正在按预期工作。

在IE 9上，它插入的节点比我们点击的点高出约30px和5px（？！）

但是在Firefox（第26版）和Safari for iOS上它不起作用，它将节点放在画布的左上角。 Firefox调试说“originalEvent.x”和“originalEvent.y”属性是未定义的

"e.originalEvent.x: undefined"
"offset.left: 8"
"e.originalEvent.y: undefined"
"offset.top: 55.66667175292969"

那么，这个属性已经过时了吗？如果是这样，那么改进此代码的最佳方法是什么？

提前致谢。

编辑：几乎已经解决，注意到使用e.originalEvent.pageX和e.originalEvent.pageY代替所有桌面浏览器和Windows Phone 8，在iOS上除之外：

Answer 1

虽然Cytoscape.js中的事件与jQuery事件类似，但它们不是jQuery事件。像pageX这样的属性可以通过e.originalEvent获得，但它们没有标准化为e。在即将发布的v2.1中（或者如果您在回购中make zip），事件已使用e.cyPosition和e.cyRenderedPosition进行了更新。这些值分别提供模型位置和渲染（在屏幕上，相对于cy.js实例）位置。

另请注意，即使使用jQuery事件，我认为您的方法也不适用于iOS等，因为触摸事件未规范化。 e.cyPosition和e.cyRenderedPosition确实支持触摸活动。

cytoscape.js“e.originalEvent.x”在浏览器上有不同的行为

1 个答案: