html 输入 cytoscape.js 无法打开对话框 window

Question

我正在构建一个交互式图形应用程序，用户可以在其中上传数据文件。然后应用程序将从输入文件构建图形。

我在使用 cytoscape 进行输入时遇到问题。更具体地说，当我包含 div 时，文件对话框 window 不会弹出。也就是说，除非我注释掉 cytoscape ，否则输入按钮没有响应。

请看下面的代码。我想，这不是 cytoscape 特有的。但是，我无法深入了解，所以我发布了问题的完整实例。

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <script src="cytoscape.js"></script>
</head>

<style>
    #cy {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
    }
</style>

<body>
    
  <form name="uploadForm">
    <div>
      <input id="uploadInput" type="file" name="myFiles" multiple>
      selected files: <span id="fileNum">0</span>;
      total size: <span id="fileSize">0</span>
    </div>
    <div><input type="submit" value="Send file"></div>
  </form>
 
  <div>
      <h1>This!</h1>
  </div>    
  <div id="cy"></div> 
  
<script>
  function updateSize() {
    let nBytes = 0,
        oFiles = this.files,
        nFiles = oFiles.length;
    for (let nFileId = 0; nFileId < nFiles; nFileId++) {
      nBytes += oFiles[nFileId].size;
    }
    let sOutput = nBytes + " bytes";
    // optional code for multiples approximation
    const aMultiples = ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"];
    for (nMultiple = 0, nApprox = nBytes / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) {
      sOutput = nApprox.toFixed(3) + " " + aMultiples[nMultiple] + " (" + nBytes + " bytes)";
    }
    // end of optional code
    document.getElementById("fileNum").innerHTML = nFiles;
    document.getElementById("fileSize").innerHTML = sOutput;
    console.log("AAAA!")
  }

  document.getElementById("uploadInput").addEventListener("change", updateSize, false);
</script>

<script>
    // https://blog.js.cytoscape.org/2016/05/24/getting-started/
  var cy = cytoscape({
    container: document.getElementById('cy'),
    // ~~~~~~~~~~~~~~~~~~~
    elements: [
    { data: { id: 'a' } },
    { data: { id: 'b' } },
    {
        data: {
        id: 'ab',
        source: 'a',
        target: 'b'
        }
    }],
    // ~~~~~~~~~~~~~~~~~~~
    style: [
        {
            selector: 'node',
            style: {
                shape: 'hexagon',
                'background-color': 'red',
                label: 'data(id)'
            }
        }]      
});
cy.layout({
    name: 'circle'
}).run();
</script>

</body>
</html>

Answer 1

与div的z-index有关。在您的情况下，因为您没有将 z-indexes 分配给 divs 并在末尾添加 cy div，所以它呈现在顶部，因此您无法与按钮交互.

可以给cy赋一个z-index div比如-1发送到后台:

#cy {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: -1;
}

但在这种情况下，您将无法与 cy canvas 的顶部进行交互。更好的解决方案是将 top 属性更改为某个值，例如 250px，以便 cy canvas 开始呈现在按钮和文本下方：

#cy {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 250px;
    left: 0px;
}

html 输入 cytoscape.js 无法打开对话框 window

html input with cytoscape.js fails to open the dialog window

javascript

html

css

input

cytoscape