Does it possible to add 'if not clicked' condition on addEventLisenter in pure JavaScript?
Suppose, I want gameplay that could increase score for click on a specific colored bubble(1). If the appeared bubble not clicked, the score will decrease or even the game will over.(2)
It's easy to use addEventLisener 'click' event to conquer the number 1. But how I can do the 2?
javascript javascript-events addeventlistener
asked Dec 28 '18 at 2:57
Ebrahim Khalil Amid
11
add a comment |
Suppose, I want gameplay that could increase score for click on a specific colored bubble(1). If the appeared bubble not clicked, the score will decrease or even the game will over.(2)
It's easy to use addEventLisener 'click' event to conquer the number 1. But how I can do the 2?
javascript javascript-events addeventlistener
asked Dec 28 '18 at 2:57
Ebrahim Khalil Amid
11
3
You could usesetTimeoutto check if the score has changed by the time desired (if not, there hasn't been a click)
– CertainPerformance
Dec 28 '18 at 2:59
add a comment |
Suppose, I want gameplay that could increase score for click on a specific colored bubble(1). If the appeared bubble not clicked, the score will decrease or even the game will over.(2)
It's easy to use addEventLisener 'click' event to conquer the number 1. But how I can do the 2?
javascript javascript-events addeventlistener
asked Dec 28 '18 at 2:57
Ebrahim Khalil Amid
11
Suppose, I want gameplay that could increase score for click on a specific colored bubble(1). If the appeared bubble not clicked, the score will decrease or even the game will over.(2)
It's easy to use addEventLisener 'click' event to conquer the number 1. But how I can do the 2?
javascript javascript-events addeventlistener
javascript javascript-events addeventlistener
asked Dec 28 '18 at 2:57
Ebrahim Khalil Amid
11
asked Dec 28 '18 at 2:57
Ebrahim Khalil Amid
11
asked Dec 28 '18 at 2:57
Ebrahim Khalil Amid
11
asked Dec 28 '18 at 2:57
Ebrahim Khalil Amid
11
asked Dec 28 '18 at 2:57
Ebrahim Khalil Amid
11
11
3
You could usesetTimeoutto check if the score has changed by the time desired (if not, there hasn't been a click)
– CertainPerformance
Dec 28 '18 at 2:59
add a comment |
3
You could usesetTimeoutto check if the score has changed by the time desired (if not, there hasn't been a click)
– CertainPerformance
Dec 28 '18 at 2:59
3
3
You could use
setTimeout to check if the score has changed by the time desired (if not, there hasn't been a click)– CertainPerformance
Dec 28 '18 at 2:59
You could use
setTimeout to check if the score has changed by the time desired (if not, there hasn't been a click)– CertainPerformance
Dec 28 '18 at 2:59
add a comment |
1 Answer
1
active
oldest
votes
It depends on the behavior of your bubbles. As mentioned by @CertainPerformance, you can use a setTimeout, but as you are talking about bubbles, I imagine a bubble going up to the sky, so you could also use the Intersection Observer API to detect when the bubble leaves the viewport, for example:
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>Keep in mind that the Intersection Observer API is not supported by Internet Explorer and you will need a polyfill for the unsupported browsers.
answered Dec 29 '18 at 8:54
Armel
411114
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53953190%2fdoes-it-possible-to-add-if-not-clicked-condition-on-addeventlisenter-in-pure-j%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
It depends on the behavior of your bubbles. As mentioned by @CertainPerformance, you can use a setTimeout, but as you are talking about bubbles, I imagine a bubble going up to the sky, so you could also use the Intersection Observer API to detect when the bubble leaves the viewport, for example:
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>Keep in mind that the Intersection Observer API is not supported by Internet Explorer and you will need a polyfill for the unsupported browsers.
answered Dec 29 '18 at 8:54
Armel
411114
add a comment |
It depends on the behavior of your bubbles. As mentioned by @CertainPerformance, you can use a setTimeout, but as you are talking about bubbles, I imagine a bubble going up to the sky, so you could also use the Intersection Observer API to detect when the bubble leaves the viewport, for example:
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>Keep in mind that the Intersection Observer API is not supported by Internet Explorer and you will need a polyfill for the unsupported browsers.
answered Dec 29 '18 at 8:54
Armel
411114
add a comment |
It depends on the behavior of your bubbles. As mentioned by @CertainPerformance, you can use a setTimeout, but as you are talking about bubbles, I imagine a bubble going up to the sky, so you could also use the Intersection Observer API to detect when the bubble leaves the viewport, for example:
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>Keep in mind that the Intersection Observer API is not supported by Internet Explorer and you will need a polyfill for the unsupported browsers.
answered Dec 29 '18 at 8:54
Armel
411114
It depends on the behavior of your bubbles. As mentioned by @CertainPerformance, you can use a setTimeout, but as you are talking about bubbles, I imagine a bubble going up to the sky, so you could also use the Intersection Observer API to detect when the bubble leaves the viewport, for example:
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>Keep in mind that the Intersection Observer API is not supported by Internet Explorer and you will need a polyfill for the unsupported browsers.
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>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>answered Dec 29 '18 at 8:54
Armel
411114
answered Dec 29 '18 at 8:54
Armel
411114
answered Dec 29 '18 at 8:54
Armel
411114
answered Dec 29 '18 at 8:54
Armel
411114
411114
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53953190%2fdoes-it-possible-to-add-if-not-clicked-condition-on-addeventlisenter-in-pure-j%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
3
You could use
setTimeoutto check if the score has changed by the time desired (if not, there hasn't been a click)– CertainPerformance
Dec 28 '18 at 2:59