Javascript 未捕获的类型错误：无法读取 null 的属性“querySelectorAll”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30656503/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
uncaught typeError: cannot read property 'querySelectorAll' of null
提问by Tom
I am trying to use this menu for mobile on a site. http://tympanus.net/codrops/2013/08/13/multi-level-push-menu/comment-page-8/#comment-466199
我正在尝试在网站上将此菜单用于移动设备。 http://tympanus.net/codrops/2013/08/13/multi-level-push-menu/comment-page-8/#comment-466199
I have it working but one ie11 user is reporting an error and i am seeing the following error in console Uncaught TypeError: Cannot read property 'querySelectorAll' of nullmlPushMenu._init @ mlpushmenu.js:89mlPushMenu @ mlpushmenu.js:67(anonymous function) @ (index):1062
我有它的工作，但一个 ie11 用户报告错误，我在控制台中看到以下错误 Uncaught TypeError: Cannot read property 'querySelectorAll' of nullmlPushMenu._init @ mlpushmenu.js:89mlPushMenu @ mlpushmenu.js:67(anonymous function) @（索引）：1062
Here is a snippet of the js file in question
这是有问题的js文件的片段
function mlPushMenu( el, trigger, options ) {
this.el = el;
this.trigger = trigger;
this.options = extend( this.defaults, options );
// support 3d transforms
this.support = Modernizr.csstransforms3d;
if( this.support ) {
this._init();
}
}
mlPushMenu.prototype = {
defaults : {
// overlap: there will be a gap between open levels
// cover: the open levels will be on top of any previous open level
type : 'overlap', // overlap || cover
// space between each overlaped level
levelSpacing : 40,
// classname for the element (if any) that when clicked closes the current level
backClass : 'mp-back'
},
_init : function() {
// if menu is open or not
this.open = false;
// level depth
this.level = 0;
// the moving wrapper
this.wrapper = document.getElementById( 'mp-pusher' );
// the mp-level elements
this.levels = Array.prototype.slice.call( this.el.querySelectorAll( 'div.mp-level' ) );
// save the depth of each of these mp-level elements
var self = this;
this.levels.forEach( function( el, i ) { el.setAttribute( 'data-level', getLevelDepth( el, self.el.id, 'mp-level' ) ); } );
// the menu items
this.menuItems = Array.prototype.slice.call( this.el.querySelectorAll( 'li' ) );
// if type == "cover" these will serve as hooks to move back to the previous level
this.levelBack = Array.prototype.slice.call( this.el.querySelectorAll( '.' + this.options.backClass ) );
// event type (if mobile use touch events)
this.eventtype = mobilecheck() ? 'touchstart' : 'click';
// add the class mp-overlap or mp-cover to the main element depending on options.type
classie.add( this.el, 'mp-' + this.options.type );
// initialize / bind the necessary events
this._initEvents();
},
the specific line 89 is in the middle of that so here it is pulled out for your orientation
特定的第 89 行位于中间，因此在此处将其拉出以用于您的方向
this.levels = Array.prototype.slice.call( this.el.querySelectorAll( 'div.mp-level' ) );
I have then called the instance of the plugin in my footer (thats the index line 1082
然后我在页脚中调用了插件的实例（即索引行 1082
that call looks like this
那个电话看起来像这样
<script>
new mlPushMenu(
document.getElementById( 'mp-menu' ),
document.getElementById( 'trigger' ),
{ type : 'cover' }
);
</script>
采纳答案by Sampson
Your desktop site does not have an element with an ID of "mp-menu." When you call the getElementByIdmethod, you're getting nullin response. This is then assigned to the elproperty of the object. When you attempt to call querySelectorAll, you're attempting to do so from a null value.
您的桌面站点没有 ID 为“ mp-menu”的元素。当您调用getElementById方法时，您会得到null响应。然后将其分配给el对象的属性。当您尝试调用querySelectorAll 时，您正在尝试从空值执行此操作。
According to the comments on the question above, the mp-menuelement is present on the mobile sitealone. If this is the case, this code should also only be loaded on mobile.
根据对上述问题的评论，mp-menu元素仅存在于移动站点上。如果是这种情况，此代码也应该只加载到 mobile 上。
回答by Tom
The problem was that the JS files were being called on all platforms, desktop and mobile. while the mobile menu that used the mlPushMenu was only called on mobile devices. making it so the JS files were only called on mobile solved the problem for desktop browsers.
问题是 JS 文件在所有平台、桌面和移动设备上都被调用。而使用 mlPushMenu 的移动菜单仅在移动设备上调用。使 JS 文件仅在移动设备上调用解决了桌面浏览器的问题。
