这可能是一个非常愚蠢的问题,但我想了解其背后的原因。我为糟糕的问题标题道歉。
下面的代码有效。当 btn 元素有 mousedown 事件时,会显示一个菜单,并添加一个事件侦听器来隐藏文档中任何位置的 mousedown 事件的菜单。如果在显示菜单时单击 btn,则不会再次添加该事件,而是通过调用函数 clear 将其删除。所以,根本没有什么特别的。
我不明白并且浪费了很多时间的是,如果在 menu_func 中声明了 clear 函数,则在第二个 btn mousedown 事件时不会删除文档上的事件侦听器。(我的意思是简单地将 menu_func 的右大括号移到 clear 函数的右大括号之后。)调用 clear 函数并执行其余代码,但在文档有鼠标之前不会删除事件侦听器down 事件,然后它记录多个已删除的事件侦听器消息。
如果没有向控制台日志写入任何内容,人们会认为代码以任何一种方式工作,但事实并非如此。
请解释我在这里不明白的地方。谢谢你。
btn.addEventListener( 'mousedown', menu_func, false );
function menu_func(evt) {
evt.stopPropagation();
let e = evt.currentTarget;
if ( e.disp ) {
clear();
}
else {
document.addEventListener( 'mousedown', clear, false );
e.disp = true;
/* Some CSS style code to display menu. */
console.log('Event Listener Added');
}; // end if
} // close menu_func
function clear() {
document.removeEventListener( 'mousedown', clear, false );
e.disp = false;
/* Some CSS style code to remove menu. */
console.log('Event Listener Removed');
} // close clear