设置Canvas为窗口大小时导航菜单Dropdown功能异常

为确保Canvas在响应式页面正常运行，我通过以下代码将Canvas尺寸设置为基于clientWidth和clientHeight的数值：

XSize = document.documentElement.clientWidth;
YSize = document.documentElement.clientHeight;
Y = document.getElementById("NavBarDiv").clientHeight;

CancasXSize = XSize - 2;
CancasYSize = YSize - Y - 2;

c = document.getElementById("Time_CV");
c.width = CancasXSize;
c.height = CancasYSize;

c = document.getElementById("Mouse_CV");
c.width = CancasXSize;
c.height = CancasYSize;

此时页面绘图功能正常，但出现导航菜单交互问题：悬停导航菜单按钮时下拉菜单可以显示，但鼠标移开导航栏按钮去选择下拉链接时，菜单会立即消失。

若注释掉Canvas宽高设置代码：

c = document.getElementById("Time_CV");
// c.width = CancasXSize;
// c.height = CancasYSize;

c = document.getElementById("Mouse_CV");
// c.width = CancasXSize;
// c.height = CancasYSize;

导航菜单可正常工作，但Canvas无法实现响应式绘图功能。

额外测试情况 #

• 全屏模式（Chrome开发者工具）：上述菜单消失问题存在
• 600x600模拟模式（Chrome开发者工具）：导航菜单无法通过悬停触发，需点击按钮后下拉菜单才会出现，且此时可正常选择链接

完整测试页面代码 #

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style>
body {
  font-family: Arial, Helvetica, sans-serif;
}

div.IEcontent 
{
   text-align: center;
}

.container {
  display: flex;
  justify-content: space-between;
  align-items:center;
  height: 7vmin;
  border-radius: 3vmin;
}

h2 {
  display: inline-block;
  font-size: 5vmin;
  padding-right: 3vmin;
  float: right;
}

.navbar {
  overflow: hidden;
  display: inline-block;
}

.navbar a {
  float: left;
  color: white;
  text-align: center;
  padding: 5vmin 5vmin;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 4vmin;  
  border: none;
  outline: none;
  color: white;
  padding: 5vmin 7vmin;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
  position: relative;
  z-index: 1;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 200px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 2vmin 5vmin;
  text-decoration: none;
  display: block;
  text-align: left;
  font-size: 3vmin; 
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown-content_Mouse {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 200px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content_Mouse a {
  float: none;
  color: black;
  padding: 2vmin 7vmin;
  text-decoration: none;
  display: block;
  text-align: left;
  font-size: 2vmin; 
}

.dropdown-content_Mouse a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content_Mouse {
  display: block;
}

.Ibutton
{
  padding: 2vmin 2vmin;
  border-radius: 3vmin;
}

#canvas-container { position: relative; }
canvas { position: absolute; left: 0; top: 0; }

#Time_CV
{
    z-index: 0;
}

#Mouse_CV
{
    z-index: 1;
}

</style>

<script type="text/javascript">

var XSize;
var YSize;
var CancasXSize;
var CancasYSize;

window.onload = function() 
{
    var Y;

    XSize = document.documentElement.clientWidth;

    YSize = document.documentElement.clientHeight;

    Y = document.getElementById("NavBarDiv").clientHeight;

    CancasXSize = XSize - 2;

    CancasYSize = YSize - Y - 2;

    c = document.getElementById("Time_CV");
    c.width = CancasXSize;
    c.height = CancasYSize;

   c = document.getElementById("Mouse_CV");
   c.width = CancasXSize;
   c.height = CancasYSize;
}

</script>
</head>

<body id="MyPage" style ="background-color:#000000">

<div class="container" style ="color:#ffffff; background-color:#000080">
<div id="NavBarDiv" class="navbar">
       <div class="dropdown">
         <button class="dropbtn">  Menu </button>
         <div class="dropdown-content">
      <a href="RT_Text.html">Real Time Text</a>
      <a href="RT_Charting.html">Real Time Charting</a>
      <a href="History_Charting.html">History Charting</a>
      <a href="Config_Text.html">Config Text</a>
      <a href="Config_Charting.html">Config Charting</a>
      <a href="Config_SetPoints.html">RT Color SetPoints</a>
      <a href="Time.html">Adjust Time</a>
         </div>
       </div> 

       <div class="dropdown">
         <button class="dropbtn">  Mouse Actions </button>
         <div class="dropdown-content_Mouse">
        <a href="#" onclick="Mouse_Cancel()">Cancel</a>
        <a href="#" onclick="Mouse_Reset()">Reset to Original</a>
        <a href="#" onclick="Mouse_TimeData()">Time Data</a>
        <a href="#" onclick="Mouse_Box()">Box</a>
        <a href="#" onclick="Mouse_BoxZoom()">Box Zoom</a>
        <a href="#" onclick="Mouse_VLine()">Vertical Line</a>
        <a href="#" onclick="Mouse_ClipR()">Clip Vline Right</a>
        <a href="#" onclick="Mouse_ClipL()">Clip Vline Left</a>
        <a href="#" onclick="Mouse_HLine()">Horizontal Line</a>
        <a href="#" onclick="Mouse_ClipU()">Clip Hline Up</a>
        <a href="#" onclick="Mouse_ClipD()">Clip Hline Down</a>
        </div>
        </div> 

</div>
<h2>Time Charting</h2>
</div>
<div id="canvas-container"  class="IEcontent">
<canvas id="Time_CV" width="100%" height="100%" ></canvas>
<canvas id="Mouse_CV" width="100%" height="100%" ></canvas>
</div>
</body>
</html>

内容的提问来源于stack exchange，提问作者JHinkle