无法执行“节点”上的'removeChild'滑出错误

我有一个幻灯片输出功能，在chrome控制台中给了我上述错误。它在我的JS函数中站点行document.body.removeChild(document.getElementById("overlay04"));。我如何避免这种情况？谢谢。 test_site_link 无法执行“节点”上的'removeChild'滑出错误

function expandOverlay() { 
 
    var overlay = document.createElement("div"); 
 
    overlay.setAttribute("id", "overlay04"); 
 
    overlay.setAttribute("class", "overlay04"); 
 
    document.body.appendChild(overlay); 
 
    $(overlay).hide().fadeIn(80); 
 
} 
 

 
function restore() { 
 
    document.body.removeChild(document.getElementById("overlay04")); 
 
} 
 

 
// create menu variables 
 
var slideoutMenu = $('.slideout-menu'); 
 
var slideoutMenuWidth = $('.slideout-menu').width(); 
 

 
$(document).ready(function() { 
 
    $('.slideout-menu-toggle').on('click', function(event) { 
 
    event.preventDefault(); 
 
    // toggle open class 
 
    slideoutMenu.toggleClass("open"); 
 

 
    // slide menu 
 
    if (slideoutMenu.hasClass("open")) { 
 
     slideoutMenu.animate({ 
 
     left: "0px" 
 
     }, 160); 
 
     expandOverlay(); 
 
    } else { 
 
     slideoutMenu.animate({ 
 
     left: -slideoutMenuWidth 
 
     }, 160); 
 
     restore(); 
 
    } 
 
    }); 
 

 
}); 
 

 
window.addEventListener('mouseup', function(event) { 
 
    var box = document.getElementById('menu_s'); 
 
    if (event.target != box && event.target.parentNode != box) { 
 
    slideoutMenu.animate({ 
 
     left: -slideoutMenuWidth 
 
    }, 160); 
 
    restore(); 
 
    slideoutMenu.toggleClass("open"); 
 
    } 
 
});

的完整代码。这里

来源

2016-10-05 Max Njoroge

使用调试添加一个空检查，你会看到'restore'是在第一次点击时从mouseup监听器调用。算法很奇怪：添加了叠加层，以便底层按钮不再接收任何点击事件。有几种方法可以正确地做到这一点。例如，使覆盖层永久并显示/隐藏它，将一个点击事件附加到它上面，这将使菜单动画化。 – wOxxOm

好主意让我们看看 –

问题是id为div元素“overlay04”不可用时，你所说的“恢复”功能，它在其中后“恢复”功能执行“expandOverlay”功能创建

document.getElementById("overlay04"）将null 这是为什么你得到类型错误

解决方案：在“恢复”功能

function restore() { 
    var $overlay04 = document.getElementById("overlay04"); 
    if ($overlay04) { 
    document.body.removeChild($overlay04); 
    } 
}

来源

2016-10-05 07:31:15

很好，没有更多的错误，但是，该链接然后需要多次点击才能打开。 –

无法执行“节点”上的'removeChild'滑出错误

回答

相关问题