Question

我正在尝试创建一个下拉菜单。它的构建方式如下：如果单击了菜单，它将触发一个添加类open的函数。然后CSS将处理开放。然后它会向window添加一个点击事件，当被触发时，将删除open类，然后删除窗口事件，因为在下一个菜单点击事件之前不再需要它。

问题是，当菜单点击事件被触发时，窗口点击事件也会被触发，即使它的事件仅在点击后被添加。这是一个例子:(这不是下拉菜单，因为我认为它是不必要的代码。但算法是相同的。）

如何在菜单点击事件后添加窗口点击事件，这样就不会在点击事件中调用它？（另外，如果我的算法没有意义，请发布一个。）

JSFiddle

var something = document.getElementById('something');

something.addEventListener('click', somethingClick);

function somethingClick() {
  console.log('something got clicked');

  window.addEventListener('click', windowClick);
}


function windowClick() {
  console.log('window got clicked');

  window.removeEventListener('click', windowClick);
}

#something {
  width: 100px;
  height: 100px;
  background-color: orange;
}

<div id="something"></div>

Answer 1

评论是正确的，只是向您展示如何实施。

＆＃13;

var something = document.getElementById('something');

something.addEventListener('click', somethingClick);

function somethingClick(event) { // <-- Added event
  event.stopPropagation(); // <-- prevent bubbling up to window
  console.log('something got clicked');

  window.addEventListener('click', windowClick);
}


function windowClick() {
  console.log('window got clicked');

  window.removeEventListener('click', windowClick);
}

＆＃13;

#something {
  width: 100px;
  height: 100px;
  background-color: orange;
}

＆＃13;

<div id="something"></div>

＆＃13;

事件在应该被调用之前被调用

JSFiddle

1 个答案: