是否可以在纯JavaScript中的addEventLisenter上添加“如果未单击”条件?

时间:2018-12-28 02:57:34

标签: javascript javascript-events addeventlistener

假设,我想要可以增加点击特定彩色气泡(1)的得分的游戏玩法。如果未单击出现的气泡,则得分会降低,甚至游戏也会结束。(2)

使用addEventLisener'click'事件来征服数字1很容易,但是我该怎么做2?

1 个答案:

答案 0 :(得分:0)

这取决于气泡的行为。正如@CertainPerformance所提到的,您可以使用setTimeout,但是当您谈论气泡时,我想像是气泡上升到了天空,因此您也可以使用Intersection Observer API来检测何时出现气泡离开视口,例如:

var bubble = document.getElementById('bubble');

var options = {
  root: document.querySelector('#window'),
  rootMargin: '0px',
  threshold: 0
}

var callback = function(entries, observer) { 
  entries.forEach(entry => {
    if (!entry.isIntersecting) {
      bubble.parentNode.removeChild(bubble);
      alert('You missed it!');
    }
  });
};

var observer = new IntersectionObserver(callback, options);

observer.observe(bubble);

bubble.addEventListener('click', function() {
  observer.unobserve(bubble);
  alert('Got it!');
  bubble.parentNode.removeChild(bubble);
});
#window {
  background: blue;
  border: 1px solid black;
  height: 250px;
  overflow: hidden;
  position: relative;
  width: 500px;
}

#bubble {
  animation: fly 5s normal;
  background: red;
  border-radius: 20px;
  height: 40px;
  left: 150px;
  position: absolute;
  width: 40px; 
}

@keyframes fly {
  from {
    top: 250px;
  }
  to {
    top: -100px;
  }
}
<div id="window">
  <div id="bubble"></div>
</div>

请记住,Internet Explorer不支持Intersection Observer API,对于不受支持的浏览器,您需要polyfill