cytoscape.js「e.originalEvent.x」在瀏覽器上的行爲不同

我試圖用cytoscape.js構建一個跨平臺工具，包括移動設備，但是我在使用「tap」時遇到一些問題，功能添加一個節點：cytoscape.js「e.originalEvent.x」在瀏覽器上的行爲不同

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瀏覽器的Windows 7（32節），並在Safari上它工作正常。

在IE 9只需插入節點大約30像素高，比我們點擊（？！）

但在Firefox（第26節）和Safari瀏覽器爲它不工作的iOS，它把是該點5px的左畫布左上角的節點。 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 :(

來源

2014-01-22 gcpdev

也許跨瀏覽器的差異是不應該使用['originalEvent']（http://api.jquery.com/category/events/event-object/）的原因？ – Bergi

@Bergi是的，也許。但我發現使用'originalEvent.pageX'和'originalEvent.pageY'似乎是正確的方式，現在所有的瀏覽器都正確地識別它。謝謝 – gcpdev

我鏈接的頁面確實提到了爲了跨瀏覽器一致性而對「e.pageX」和「e.pageY」（不需要「originalEvent」！）進行了標準化。 – Bergi

雖然在Cytoscape.js事件是類似的jQuery事件，它們不是jQuery事件，像pageX這樣的屬性可以通過e.originalEvent得到，儘管它們沒有被歸一化爲e在即將到來的v2.1（或者如果你make zip在回購中），事件已被更新爲e.cyPosition和e.cyRenderedPosition。值分別提供模型位置和渲染（在屏幕上，相對tive to cy.js實例）的位置。

另外請注意，我認爲你的方法不會在iOS等工作，即使使用jQuery事件，因爲觸摸事件沒有規範化。儘管如此，e.cyPosition和e.cyRenderedPosition確實支持觸摸事件。

來源

2014-01-23 16:50:21 maxkfranz

謝謝Max，我會看看v2.1。我非常感謝你的好工作。恭喜，繼續前進，我相信這是正確的。 – gcpdev

cytoscape.js「e.originalEvent.x」在瀏覽器上的行爲不同

回答

相關問題