為什么關閉 canvas 代碼在移動設備中不起作用？

Question

我從https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav得到了這個代碼，它在移動設備上運行良好。 如此簡單，但有效。 但是我的使用不適用於我的手機或客戶的手機。

控制台 說：

(index):66 Uncaught TypeError: Cannot read properties of null (reading 'style') at openNav ((index):66) at HTMLDivElement.onmouseover ((index):79)

有人願意冒險猜測為什么這不起作用嗎？

 function openNav() { document.getElementById("mySidenav").style.width = "250px"; } function closeNav() { document.getElementById("mySidenav").style.width = "0"; }

 .sidenav { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: #96AD74; background-color: #9C836E; overflow-x: hidden; transition: 0.5s; padding-top: 30px; letter-spacing: 1px; }.sidenav a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #E2FAC0; display: block; transition: 0.3s; text-shadow: 1px 1px 0 #000; }.sidenav a:hover { color: darkblue; background: #808000; background: #7E6EB5; background: #FFAC1C; text-shadow: none; }.sidenav.closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; text-shadow: none; } #main { transition: margin-left.5s; padding: 16px; } @media screen and (max-height: 450px) {.sidenav { padding-top: 15px; }.sidenav a { font-size: 18px; }

 <div id="mySidenav" class="sidenav" onmouseleave="closeNav();"> <div class="pcc">MENU</div> <a href="index.php">home</a> <a href="coach.php">coaching</a> <a href="bio.php">biography</a> <a href="contact.php">contact</a> </div>

Answer 1

如果我理解正確，您想在用戶在手機上觸摸菜單之外的任何內容時關閉菜單。

將以下內容添加到您的 JavaScript 文件中：

document.addEventListener('click', function(e) {
    var mySidenav = document.getElementById("mySidenav");
    var openButton = document.getElementById("openButton");
    if (mySidenav.style.width == "250px" && !mySidenav.contains(e.target) && e.target != openButton) {
        closeNav();
    }
});

這將使得當您單擊（觸摸）除了打開按鈕之外的任何元素時，它將關閉側邊欄。

另外，不要忘記將打開導航欄的元素的 ID 設置為“openButton”，例如在您鏈接的 W3School 教程中，您應該像這樣修改它：

<span id="openButton" style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>