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

cytoscape.js“e.originalEvent.x”在浏览器上有不同的行为(cytoscape.js “e.originalEvent.x” with different behavior on browsers)

我正在尝试使用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 :(

I'm trying to build a crossplatform tool with cytoscape.js, wich includes mobile devices, but I'm facing some problems when using the "tap" function to add a node:

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 } } });

On Chrome for Windows 7 (v.32) and also on Safari it is working as expected.

On IE 9 it's inserting the node about 30px higher and 5px left than the point where we click (?!)

But on Firefox (v.26) and Safari for iOS it's not working, it put's the node on the top-left corner of the canvas. Firefox debug says that the "originalEvent.x" and "originalEvent.y" properties are undefined

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

So, is this property obsolete? If so, what should be the best way to improve this code?

Thanks in advance.

EDIT: Almost solved, noticed that using e.originalEvent.pageX and e.originalEvent.pageY instead works well over all desktop browsers and on Windows Phone 8, except on iOS :(

最满意答案

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

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

Though the events in Cytoscape.js are similar to jQuery events, they are not jQuery events. Properties like pageX are available through e.originalEvent, though they are not normalised to e. In the upcoming v2.1 (or if you make zip in the repo), events have been updated with e.cyPosition and e.cyRenderedPosition. These values respectively provide the model position and rendered (on screen, relative to cy.js instance) position.

Also note that I don't think your approach would work on iOS etc even using jQuery events, because touch events aren't normalised. e.cyPosition and e.cyRenderedPosition do support touch events, though.