Detect how long an HTML button is pressed
$begingroup$
I recently had the need to detect how long a button is pressed and perform different actions based on that. I found some examples on Stack Overflow, but the ones I looked at showed how to use timeout().
I came up with this. There are probably other ways to solve this. While searching, I found an example using IIFE in JavaScript, which I then used for this tiny example.
HTML:
<button id="button">click</button>
JavaScript:
(function(window, document, undefined){
'use strict';
var start;
var end;
var delta;
var button = document.getElementById("button");
button.addEventListener("mousedown", function(){
start = new Date();
});
button.addEventListener("mouseup", function() {
end = new Date();
delta = end - start;
if (delta > 0 && delta < 500) {
alert("less than half second:");
}
if (delta > 1000) {
alert("more than a second:");
}
});
})(window, document);
javascript event-handling
edited Dec 11 '15 at 17:27
Jamal♦
30.4k11121227
asked Dec 11 '15 at 10:43
kometenkometen
12615
$endgroup$
add a comment |
$begingroup$
I recently had the need to detect how long a button is pressed and perform different actions based on that. I found some examples on Stack Overflow, but the ones I looked at showed how to use timeout().
I came up with this. There are probably other ways to solve this. While searching, I found an example using IIFE in JavaScript, which I then used for this tiny example.
HTML:
<button id="button">click</button>
JavaScript:
(function(window, document, undefined){
'use strict';
var start;
var end;
var delta;
var button = document.getElementById("button");
button.addEventListener("mousedown", function(){
start = new Date();
});
button.addEventListener("mouseup", function() {
end = new Date();
delta = end - start;
if (delta > 0 && delta < 500) {
alert("less than half second:");
}
if (delta > 1000) {
alert("more than a second:");
}
});
})(window, document);
javascript event-handling
edited Dec 11 '15 at 17:27
Jamal♦
30.4k11121227
asked Dec 11 '15 at 10:43
kometenkometen
12615
$endgroup$
$begingroup$
Welcome to Code Review! I have rolled back the last edit. Please see what you may and may not do after receiving answers.
$endgroup$
– Heslacher
Dec 11 '15 at 10:55
1
$begingroup$
Click the button, hold mouse down, move mouse off button, release button. No alert. Do you want it to alert in that case?
$endgroup$
– epascarello
Dec 11 '15 at 13:57
$begingroup$
No, not in this particular case. I assign it to a + button and give a team a goal. If I hold it for longer than three seconds it shall cancel a goal given to a team.
$endgroup$
– kometen
Dec 11 '15 at 15:22
$begingroup$
I think I see what you mean, I'll test. It shouldn't. I thought about it while making lasagne.
$endgroup$
– kometen
Dec 11 '15 at 15:47
$begingroup$
This solution does not work on my browser, which is Iron Version 65.0.3400.0 (Official Build) (64-bit) (Iron is based on Chrome, so I'd suspect this also doesn't work with the latest Chrome anymore). The problem is that buttons seem to immediately fire an event when clicked. This can be fixed by just changing the html to use:<div id="button">click</button>or you can just give most any other element the id of "button" and it should work. Here's an example of a fiddle I made which uses a font-awesome icon which has been given the id "button": jsfiddle.net/f6a1cys9/2
$endgroup$
– rishi
4 hours ago
add a comment |
$begingroup$
I recently had the need to detect how long a button is pressed and perform different actions based on that. I found some examples on Stack Overflow, but the ones I looked at showed how to use timeout().
I came up with this. There are probably other ways to solve this. While searching, I found an example using IIFE in JavaScript, which I then used for this tiny example.
HTML:
<button id="button">click</button>
JavaScript:
(function(window, document, undefined){
'use strict';
var start;
var end;
var delta;
var button = document.getElementById("button");
button.addEventListener("mousedown", function(){
start = new Date();
});
button.addEventListener("mouseup", function() {
end = new Date();
delta = end - start;
if (delta > 0 && delta < 500) {
alert("less than half second:");
}
if (delta > 1000) {
alert("more than a second:");
}
});
})(window, document);
javascript event-handling
edited Dec 11 '15 at 17:27
Jamal♦
30.4k11121227
asked Dec 11 '15 at 10:43
kometenkometen
12615
$endgroup$
I recently had the need to detect how long a button is pressed and perform different actions based on that. I found some examples on Stack Overflow, but the ones I looked at showed how to use timeout().
I came up with this. There are probably other ways to solve this. While searching, I found an example using IIFE in JavaScript, which I then used for this tiny example.
HTML:
<button id="button">click</button>
JavaScript:
(function(window, document, undefined){
'use strict';
var start;
var end;
var delta;
var button = document.getElementById("button");
button.addEventListener("mousedown", function(){
start = new Date();
});
button.addEventListener("mouseup", function() {
end = new Date();
delta = end - start;
if (delta > 0 && delta < 500) {
alert("less than half second:");
}
if (delta > 1000) {
alert("more than a second:");
}
});
})(window, document);
javascript event-handling
javascript event-handling
edited Dec 11 '15 at 17:27
Jamal♦
30.4k11121227
asked Dec 11 '15 at 10:43
kometenkometen
12615
edited Dec 11 '15 at 17:27
Jamal♦
30.4k11121227
asked Dec 11 '15 at 10:43
kometenkometen
12615
edited Dec 11 '15 at 17:27
Jamal♦
30.4k11121227
edited Dec 11 '15 at 17:27
Jamal♦
30.4k11121227
edited Dec 11 '15 at 17:27
Jamal♦
30.4k11121227
30.4k11121227
asked Dec 11 '15 at 10:43
kometenkometen
12615
asked Dec 11 '15 at 10:43
kometenkometen
12615
asked Dec 11 '15 at 10:43
kometenkometen
12615
12615
$begingroup$
Welcome to Code Review! I have rolled back the last edit. Please see what you may and may not do after receiving answers.
$endgroup$
– Heslacher
Dec 11 '15 at 10:55
1
$begingroup$
Click the button, hold mouse down, move mouse off button, release button. No alert. Do you want it to alert in that case?
$endgroup$
– epascarello
Dec 11 '15 at 13:57
$begingroup$
No, not in this particular case. I assign it to a + button and give a team a goal. If I hold it for longer than three seconds it shall cancel a goal given to a team.
$endgroup$
– kometen
Dec 11 '15 at 15:22
$begingroup$
I think I see what you mean, I'll test. It shouldn't. I thought about it while making lasagne.
$endgroup$
– kometen
Dec 11 '15 at 15:47
$begingroup$
This solution does not work on my browser, which is Iron Version 65.0.3400.0 (Official Build) (64-bit) (Iron is based on Chrome, so I'd suspect this also doesn't work with the latest Chrome anymore). The problem is that buttons seem to immediately fire an event when clicked. This can be fixed by just changing the html to use:<div id="button">click</button>or you can just give most any other element the id of "button" and it should work. Here's an example of a fiddle I made which uses a font-awesome icon which has been given the id "button": jsfiddle.net/f6a1cys9/2
$endgroup$
– rishi
4 hours ago
add a comment |
$begingroup$
Welcome to Code Review! I have rolled back the last edit. Please see what you may and may not do after receiving answers.
$endgroup$
– Heslacher
Dec 11 '15 at 10:55
1
$begingroup$
Click the button, hold mouse down, move mouse off button, release button. No alert. Do you want it to alert in that case?
$endgroup$
– epascarello
Dec 11 '15 at 13:57
$begingroup$
No, not in this particular case. I assign it to a + button and give a team a goal. If I hold it for longer than three seconds it shall cancel a goal given to a team.
$endgroup$
– kometen
Dec 11 '15 at 15:22
$begingroup$
I think I see what you mean, I'll test. It shouldn't. I thought about it while making lasagne.
$endgroup$
– kometen
Dec 11 '15 at 15:47
$begingroup$
This solution does not work on my browser, which is Iron Version 65.0.3400.0 (Official Build) (64-bit) (Iron is based on Chrome, so I'd suspect this also doesn't work with the latest Chrome anymore). The problem is that buttons seem to immediately fire an event when clicked. This can be fixed by just changing the html to use:<div id="button">click</button>or you can just give most any other element the id of "button" and it should work. Here's an example of a fiddle I made which uses a font-awesome icon which has been given the id "button": jsfiddle.net/f6a1cys9/2
$endgroup$
– rishi
4 hours ago
$begingroup$
Welcome to Code Review! I have rolled back the last edit. Please see what you may and may not do after receiving answers.
$endgroup$
– Heslacher
Dec 11 '15 at 10:55
$begingroup$
Welcome to Code Review! I have rolled back the last edit. Please see what you may and may not do after receiving answers.
$endgroup$
– Heslacher
Dec 11 '15 at 10:55
1
1
$begingroup$
Click the button, hold mouse down, move mouse off button, release button. No alert. Do you want it to alert in that case?
$endgroup$
– epascarello
Dec 11 '15 at 13:57
$begingroup$
Click the button, hold mouse down, move mouse off button, release button. No alert. Do you want it to alert in that case?
$endgroup$
– epascarello
Dec 11 '15 at 13:57
$begingroup$
No, not in this particular case. I assign it to a + button and give a team a goal. If I hold it for longer than three seconds it shall cancel a goal given to a team.
$endgroup$
– kometen
Dec 11 '15 at 15:22
$begingroup$
No, not in this particular case. I assign it to a + button and give a team a goal. If I hold it for longer than three seconds it shall cancel a goal given to a team.
$endgroup$
– kometen
Dec 11 '15 at 15:22
$begingroup$
I think I see what you mean, I'll test. It shouldn't. I thought about it while making lasagne.
$endgroup$
– kometen
Dec 11 '15 at 15:47
$begingroup$
I think I see what you mean, I'll test. It shouldn't. I thought about it while making lasagne.
$endgroup$
– kometen
Dec 11 '15 at 15:47
$begingroup$
This solution does not work on my browser, which is Iron Version 65.0.3400.0 (Official Build) (64-bit) (Iron is based on Chrome, so I'd suspect this also doesn't work with the latest Chrome anymore). The problem is that buttons seem to immediately fire an event when clicked. This can be fixed by just changing the html to use:
<div id="button">click</button> or you can just give most any other element the id of "button" and it should work. Here's an example of a fiddle I made which uses a font-awesome icon which has been given the id "button": jsfiddle.net/f6a1cys9/2$endgroup$
– rishi
4 hours ago
$begingroup$
This solution does not work on my browser, which is Iron Version 65.0.3400.0 (Official Build) (64-bit) (Iron is based on Chrome, so I'd suspect this also doesn't work with the latest Chrome anymore). The problem is that buttons seem to immediately fire an event when clicked. This can be fixed by just changing the html to use:
<div id="button">click</button> or you can just give most any other element the id of "button" and it should work. Here's an example of a fiddle I made which uses a font-awesome icon which has been given the id "button": jsfiddle.net/f6a1cys9/2$endgroup$
– rishi
4 hours ago
add a comment |
3 Answers
3
active
oldest
votes
$begingroup$
500 and 1000 should be constants.
Where you have them now you need to look through to find them in code when you want to change them. I know this is an example, but they're also meaningless. 500 doesn't tell you why half a second matters, but TIMEOUT tells you what the purpose of the number is. Declare your time values at the top of the function with clear names that denote what they're for.
answered Dec 11 '15 at 10:47
SuperBiasedManSuperBiasedMan
11.8k52660
$endgroup$
add a comment |
$begingroup$
The end variable could be removed and you could add a return in the if statements.
You could use Date.now() instead of creating a new Date object if Internet Explorer < 9 is not a problem. And the "delta > 0" is technically not required.
edited Dec 11 '15 at 18:36
Jamal♦
30.4k11121227
answered Dec 11 '15 at 17:50
zafzaf
1335
$endgroup$
$begingroup$
Thank you. You are right, delta > 0 ought not be necessary but I included it as a habit. Will try Date.now().
$endgroup$
– kometen
Dec 11 '15 at 18:50
add a comment |
$begingroup$
window and document are global variables. You don't need to pass them into your function. Why have undefined as a third variable?
Also, better practice is to only use the word var once. So it would be something like this:
var start,
end,
delta,
button = document.getElementById('button');
answered Dec 11 '15 at 17:56
krillgarkrillgar
313212
$endgroup$
$begingroup$
"only use the wordvaronce" depends on the developer. Also, it's a readability issue, not knowing what something is until you go else where. You don't know if you're in the middle of an object, an array, variable declaration, an expression etc. until you scroll up to see what came before it.
$endgroup$
– Joseph
Dec 11 '15 at 18:20
$begingroup$
That's what your code gets minimized down to. If you follow the Crockford rules and guidelines for the JavaScript Ninja, you'll have a better idea of where you're at, regardless of how long the list of declarations are. With a single grouping of your declarations at the top of your scope and maintaining that consistency, your code will look a lot cleaner.
$endgroup$
– krillgar
Dec 11 '15 at 19:00
$begingroup$
Thank you. I found an example with javascript IIFE when searching on google for anonymous functions and that example also had undefined. But true, unnecessary in this context.
$endgroup$
– kometen
Dec 11 '15 at 20:20
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
return StackExchange.using("mathjaxEditing", function () {
StackExchange.MarkdownEditor.creationCallbacks.add(function (editor, postfix) {
StackExchange.mathjaxEditing.prepareWmdForMathJax(editor, postfix, [["\$", "\$"]]);
});
});
}, "mathjax-editing");
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: "196"
};
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: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
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%2fcodereview.stackexchange.com%2fquestions%2f113587%2fdetect-how-long-an-html-button-is-pressed%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
$begingroup$
500 and 1000 should be constants.
Where you have them now you need to look through to find them in code when you want to change them. I know this is an example, but they're also meaningless. 500 doesn't tell you why half a second matters, but TIMEOUT tells you what the purpose of the number is. Declare your time values at the top of the function with clear names that denote what they're for.
answered Dec 11 '15 at 10:47
SuperBiasedManSuperBiasedMan
11.8k52660
$endgroup$
add a comment |
$begingroup$
500 and 1000 should be constants.
Where you have them now you need to look through to find them in code when you want to change them. I know this is an example, but they're also meaningless. 500 doesn't tell you why half a second matters, but TIMEOUT tells you what the purpose of the number is. Declare your time values at the top of the function with clear names that denote what they're for.
answered Dec 11 '15 at 10:47
SuperBiasedManSuperBiasedMan
11.8k52660
$endgroup$
add a comment |
$begingroup$
500 and 1000 should be constants.
Where you have them now you need to look through to find them in code when you want to change them. I know this is an example, but they're also meaningless. 500 doesn't tell you why half a second matters, but TIMEOUT tells you what the purpose of the number is. Declare your time values at the top of the function with clear names that denote what they're for.
answered Dec 11 '15 at 10:47
SuperBiasedManSuperBiasedMan
11.8k52660
$endgroup$
500 and 1000 should be constants.
Where you have them now you need to look through to find them in code when you want to change them. I know this is an example, but they're also meaningless. 500 doesn't tell you why half a second matters, but TIMEOUT tells you what the purpose of the number is. Declare your time values at the top of the function with clear names that denote what they're for.
answered Dec 11 '15 at 10:47
SuperBiasedManSuperBiasedMan
11.8k52660
answered Dec 11 '15 at 10:47
SuperBiasedManSuperBiasedMan
11.8k52660
answered Dec 11 '15 at 10:47
SuperBiasedManSuperBiasedMan
11.8k52660
answered Dec 11 '15 at 10:47
SuperBiasedManSuperBiasedMan
11.8k52660
11.8k52660
add a comment |
add a comment |
$begingroup$
The end variable could be removed and you could add a return in the if statements.
You could use Date.now() instead of creating a new Date object if Internet Explorer < 9 is not a problem. And the "delta > 0" is technically not required.
edited Dec 11 '15 at 18:36
Jamal♦
30.4k11121227
answered Dec 11 '15 at 17:50
zafzaf
1335
$endgroup$
$begingroup$
Thank you. You are right, delta > 0 ought not be necessary but I included it as a habit. Will try Date.now().
$endgroup$
– kometen
Dec 11 '15 at 18:50
add a comment |
$begingroup$
The end variable could be removed and you could add a return in the if statements.
You could use Date.now() instead of creating a new Date object if Internet Explorer < 9 is not a problem. And the "delta > 0" is technically not required.
edited Dec 11 '15 at 18:36
Jamal♦
30.4k11121227
answered Dec 11 '15 at 17:50
zafzaf
1335
$endgroup$
$begingroup$
Thank you. You are right, delta > 0 ought not be necessary but I included it as a habit. Will try Date.now().
$endgroup$
– kometen
Dec 11 '15 at 18:50
add a comment |
$begingroup$
The end variable could be removed and you could add a return in the if statements.
You could use Date.now() instead of creating a new Date object if Internet Explorer < 9 is not a problem. And the "delta > 0" is technically not required.
edited Dec 11 '15 at 18:36
Jamal♦
30.4k11121227
answered Dec 11 '15 at 17:50
zafzaf
1335
$endgroup$
The end variable could be removed and you could add a return in the if statements.
You could use Date.now() instead of creating a new Date object if Internet Explorer < 9 is not a problem. And the "delta > 0" is technically not required.
edited Dec 11 '15 at 18:36
Jamal♦
30.4k11121227
answered Dec 11 '15 at 17:50
zafzaf
1335
edited Dec 11 '15 at 18:36
Jamal♦
30.4k11121227
edited Dec 11 '15 at 18:36
Jamal♦
30.4k11121227
edited Dec 11 '15 at 18:36
Jamal♦
30.4k11121227
30.4k11121227
answered Dec 11 '15 at 17:50
zafzaf
1335
answered Dec 11 '15 at 17:50
zafzaf
1335
answered Dec 11 '15 at 17:50
zafzaf
1335
1335
$begingroup$
Thank you. You are right, delta > 0 ought not be necessary but I included it as a habit. Will try Date.now().
$endgroup$
– kometen
Dec 11 '15 at 18:50
add a comment |
$begingroup$
Thank you. You are right, delta > 0 ought not be necessary but I included it as a habit. Will try Date.now().
$endgroup$
– kometen
Dec 11 '15 at 18:50
$begingroup$
Thank you. You are right, delta > 0 ought not be necessary but I included it as a habit. Will try Date.now().
$endgroup$
– kometen
Dec 11 '15 at 18:50
$begingroup$
Thank you. You are right, delta > 0 ought not be necessary but I included it as a habit. Will try Date.now().
$endgroup$
– kometen
Dec 11 '15 at 18:50
add a comment |
$begingroup$
window and document are global variables. You don't need to pass them into your function. Why have undefined as a third variable?
Also, better practice is to only use the word var once. So it would be something like this:
var start,
end,
delta,
button = document.getElementById('button');
answered Dec 11 '15 at 17:56
krillgarkrillgar
313212
$endgroup$
$begingroup$
"only use the wordvaronce" depends on the developer. Also, it's a readability issue, not knowing what something is until you go else where. You don't know if you're in the middle of an object, an array, variable declaration, an expression etc. until you scroll up to see what came before it.
$endgroup$
– Joseph
Dec 11 '15 at 18:20
$begingroup$
That's what your code gets minimized down to. If you follow the Crockford rules and guidelines for the JavaScript Ninja, you'll have a better idea of where you're at, regardless of how long the list of declarations are. With a single grouping of your declarations at the top of your scope and maintaining that consistency, your code will look a lot cleaner.
$endgroup$
– krillgar
Dec 11 '15 at 19:00
$begingroup$
Thank you. I found an example with javascript IIFE when searching on google for anonymous functions and that example also had undefined. But true, unnecessary in this context.
$endgroup$
– kometen
Dec 11 '15 at 20:20
add a comment |
$begingroup$
window and document are global variables. You don't need to pass them into your function. Why have undefined as a third variable?
Also, better practice is to only use the word var once. So it would be something like this:
var start,
end,
delta,
button = document.getElementById('button');
answered Dec 11 '15 at 17:56
krillgarkrillgar
313212
$endgroup$
$begingroup$
"only use the wordvaronce" depends on the developer. Also, it's a readability issue, not knowing what something is until you go else where. You don't know if you're in the middle of an object, an array, variable declaration, an expression etc. until you scroll up to see what came before it.
$endgroup$
– Joseph
Dec 11 '15 at 18:20
$begingroup$
That's what your code gets minimized down to. If you follow the Crockford rules and guidelines for the JavaScript Ninja, you'll have a better idea of where you're at, regardless of how long the list of declarations are. With a single grouping of your declarations at the top of your scope and maintaining that consistency, your code will look a lot cleaner.
$endgroup$
– krillgar
Dec 11 '15 at 19:00
$begingroup$
Thank you. I found an example with javascript IIFE when searching on google for anonymous functions and that example also had undefined. But true, unnecessary in this context.
$endgroup$
– kometen
Dec 11 '15 at 20:20
add a comment |
$begingroup$
window and document are global variables. You don't need to pass them into your function. Why have undefined as a third variable?
Also, better practice is to only use the word var once. So it would be something like this:
var start,
end,
delta,
button = document.getElementById('button');
answered Dec 11 '15 at 17:56
krillgarkrillgar
313212
$endgroup$
window and document are global variables. You don't need to pass them into your function. Why have undefined as a third variable?
Also, better practice is to only use the word var once. So it would be something like this:
var start,
end,
delta,
button = document.getElementById('button');
answered Dec 11 '15 at 17:56
krillgarkrillgar
313212
answered Dec 11 '15 at 17:56
krillgarkrillgar
313212
answered Dec 11 '15 at 17:56
krillgarkrillgar
313212
answered Dec 11 '15 at 17:56
krillgarkrillgar
313212
313212
$begingroup$
"only use the wordvaronce" depends on the developer. Also, it's a readability issue, not knowing what something is until you go else where. You don't know if you're in the middle of an object, an array, variable declaration, an expression etc. until you scroll up to see what came before it.
$endgroup$
– Joseph
Dec 11 '15 at 18:20
$begingroup$
That's what your code gets minimized down to. If you follow the Crockford rules and guidelines for the JavaScript Ninja, you'll have a better idea of where you're at, regardless of how long the list of declarations are. With a single grouping of your declarations at the top of your scope and maintaining that consistency, your code will look a lot cleaner.
$endgroup$
– krillgar
Dec 11 '15 at 19:00
$begingroup$
Thank you. I found an example with javascript IIFE when searching on google for anonymous functions and that example also had undefined. But true, unnecessary in this context.
$endgroup$
– kometen
Dec 11 '15 at 20:20
add a comment |
$begingroup$
"only use the wordvaronce" depends on the developer. Also, it's a readability issue, not knowing what something is until you go else where. You don't know if you're in the middle of an object, an array, variable declaration, an expression etc. until you scroll up to see what came before it.
$endgroup$
– Joseph
Dec 11 '15 at 18:20
$begingroup$
That's what your code gets minimized down to. If you follow the Crockford rules and guidelines for the JavaScript Ninja, you'll have a better idea of where you're at, regardless of how long the list of declarations are. With a single grouping of your declarations at the top of your scope and maintaining that consistency, your code will look a lot cleaner.
$endgroup$
– krillgar
Dec 11 '15 at 19:00
$begingroup$
Thank you. I found an example with javascript IIFE when searching on google for anonymous functions and that example also had undefined. But true, unnecessary in this context.
$endgroup$
– kometen
Dec 11 '15 at 20:20
$begingroup$
"only use the word
var once" depends on the developer. Also, it's a readability issue, not knowing what something is until you go else where. You don't know if you're in the middle of an object, an array, variable declaration, an expression etc. until you scroll up to see what came before it.$endgroup$
– Joseph
Dec 11 '15 at 18:20
$begingroup$
"only use the word
var once" depends on the developer. Also, it's a readability issue, not knowing what something is until you go else where. You don't know if you're in the middle of an object, an array, variable declaration, an expression etc. until you scroll up to see what came before it.$endgroup$
– Joseph
Dec 11 '15 at 18:20
$begingroup$
That's what your code gets minimized down to. If you follow the Crockford rules and guidelines for the JavaScript Ninja, you'll have a better idea of where you're at, regardless of how long the list of declarations are. With a single grouping of your declarations at the top of your scope and maintaining that consistency, your code will look a lot cleaner.
$endgroup$
– krillgar
Dec 11 '15 at 19:00
$begingroup$
That's what your code gets minimized down to. If you follow the Crockford rules and guidelines for the JavaScript Ninja, you'll have a better idea of where you're at, regardless of how long the list of declarations are. With a single grouping of your declarations at the top of your scope and maintaining that consistency, your code will look a lot cleaner.
$endgroup$
– krillgar
Dec 11 '15 at 19:00
$begingroup$
Thank you. I found an example with javascript IIFE when searching on google for anonymous functions and that example also had undefined. But true, unnecessary in this context.
$endgroup$
– kometen
Dec 11 '15 at 20:20
$begingroup$
Thank you. I found an example with javascript IIFE when searching on google for anonymous functions and that example also had undefined. But true, unnecessary in this context.
$endgroup$
– kometen
Dec 11 '15 at 20:20
add a comment |
Thanks for contributing an answer to Code Review Stack Exchange!
- 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.
Use MathJax to format equations. MathJax reference.
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%2fcodereview.stackexchange.com%2fquestions%2f113587%2fdetect-how-long-an-html-button-is-pressed%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
$begingroup$
Welcome to Code Review! I have rolled back the last edit. Please see what you may and may not do after receiving answers.
$endgroup$
– Heslacher
Dec 11 '15 at 10:55
1
$begingroup$
Click the button, hold mouse down, move mouse off button, release button. No alert. Do you want it to alert in that case?
$endgroup$
– epascarello
Dec 11 '15 at 13:57
$begingroup$
No, not in this particular case. I assign it to a + button and give a team a goal. If I hold it for longer than three seconds it shall cancel a goal given to a team.
$endgroup$
– kometen
Dec 11 '15 at 15:22
$begingroup$
I think I see what you mean, I'll test. It shouldn't. I thought about it while making lasagne.
$endgroup$
– kometen
Dec 11 '15 at 15:47
$begingroup$
This solution does not work on my browser, which is Iron Version 65.0.3400.0 (Official Build) (64-bit) (Iron is based on Chrome, so I'd suspect this also doesn't work with the latest Chrome anymore). The problem is that buttons seem to immediately fire an event when clicked. This can be fixed by just changing the html to use:
<div id="button">click</button>or you can just give most any other element the id of "button" and it should work. Here's an example of a fiddle I made which uses a font-awesome icon which has been given the id "button": jsfiddle.net/f6a1cys9/2$endgroup$
– rishi
4 hours ago