I am trying to check whether a click on an element is a single click or a double click.
I am trying with this code.
var clk_ch = document.getElementById('clk');
function singleClick() {
alert("single click");
}
function doubleClick() {
alert("double click");
}
var clickCount = 0;
clk_ch.addEventListener('click', function() {
alert();
clickCount++;
if (clickCount === 1) {
singleClickTimer = setTimeout(function() {
clickCount = 0;
singleClick();
}, 400);
} else if (clickCount === 2) {
clearTimeout(singleClickTimer);
clickCount = 0;
doubleClick();
}
}, false);
I am not getting any alert. Where am I going wrong? clk is the id of the clicked element
<input type="image" src="button.gif" id="clk" >
No need of using setTimeout. You can add dblclick event listener.
document.addEventListener("DOMContentLoaded", function (event) {
var clk_ch = document.getElementById('clk');
clk_ch.addEventListener('click', singleClick, false);
clk_ch.addEventListener('dblclick', doubleClick, false);
});
DEMO
In jquery:
$('#clk').on('click', singleClick).on('dblclick', doubleClick);
DEMO
Related
I am trying to differentiate click and dblclick events by javascript. I tried stopPropagation in dblclick however did not work. hence I coded my own function using setTimeout tries to avoid calling the other when calling one.
/* dblclick differ click
takes two functions as param and one element
to bind the event listener on
*/
function cdblclick(click, dblclick, el){
el.cooled = true;
el.addEventListener('click', function(){
if(el.cooled){
setTimeout(function(){
if(!el.cdblc){el.cdblc = 0}
el.cdblc++;
if(el.cdblc === 1){
setTimeout(function(){
if(!el.doubled){
console.log('click')
// click();
el.cdblc = 0;
el.cooled = true;
el.doubled = false;
}
}, 300);
}else if(el.cdblc === 2){
console.log('double')
// dblclick();
el.doubled = true;
el.cdblc = 0;
el.cooled = true;
}else{
}
}, 250);
}
});
}
however, it does not work properly. I will be so glad if you ca give me a hand.
Thanks for the suggestions of divide to two elements, however, I must implement both events on the same element
solution
thanks to all the helps.
/* dblclick differ click
takes two functions as param and one element
to bind the event listener on
*/
function cdblclick(click, dblClick, el) {
let clickedTimes = 0;
const incrementClick = () => {
clickedTimes++;
};
const reset = () => {
clickedTimes = 0;
};
el.addEventListener('click', e => {
incrementClick();
setTimeout(() => {
if (clickedTimes === 1) {
click(e);
} else if (clickedTimes >= 2) {
dblClick(e);
}
reset();
}, 300);
});
}
Here's a solution where each 'click counter' is specific to each element, so onclick functions outside the element will not be effected...
const singleOrDouble = ({target}) => {
if (isNaN(target.cn)) {
target.cn = 1
} else {
target.cn++
}
setTimeout(() => {
if (target.cn == 1) {
console.log('once')
target.cn = 0
}
if (target.cn > 1) {
console.log('twice')
target.cn = 0
}
}, 500)
}
<p onclick="singleOrDouble(event)">Click me</p>
If you dont want to execute the single click at all in case of double, you can use a timeout like you did. You just have to reset the counter and the timeout properly. You do not reset el.cdblc on your last empty else.
Be aware, that this delays normal clicks.
/* dblclick differ click
takes two functions as param and one element
to bind the event listener on
*/
function cdblclick(click, dblclick, el){
//REM: Storing the values in an object instead of own element properties
let tObject = {
Clicks: 0,
onClick: click,
onDblClick: dblclick
};
//el.cooled = true;
el.addEventListener('click', function(object){
object.Clicks += 1;
//REM: Starting the click..
if(object.Clicks === 1){
object.Timeout = window.setTimeout(function(){
//REM: Execute click if not stopped
if(typeof object.onClick == 'function'){
object.onClick()
};
//REM: Resetting the click count
object.Clicks = 0
/*if(!el.cdblc){el.cdblc = 0}
el.cdblc++;
if(el.cdblc === 1){
setTimeout(function(){
if(!el.doubled){
console.log('click')
// click();
el.cdblc = 0;
el.cooled = true;
el.doubled = false;
}
*/
}.bind(this, object), 300)
}
//REM: Unless we have triple clicks, there is only double left
else{
//REM: Cancel the single click
window.clearTimeout(object.Timeout);
//REM: Execute double click
if(typeof object.onDblClick === 'function'){
object.onDblClick()
};
//REM: Resetting the click count
object.Clicks = 0
/*
console.log('double')
// dblclick();
el.doubled = true;
el.cdblc = 0;
el.cooled = true;
*/
}
}.bind(el, tObject))
};
document.querySelector('b').onclick = cdblclick(
function(){console.log('onclick')},
function(){console.log('ondblclick')},
document.body
);
<b>Click me</b>
Like this will work.
function cDblClick(click, dblClick, el) {
let clickedTimes = 0;
const incrementClick = () => {
clickedTimes++;
};
const reset = () => {
clickedTimes = 0;
};
el.addEventListener('click', () => {
incrementClick();
setTimeout(() => {
if (clickedTimes === 1) {
click();
} else if (clickedTimes === 2) {
dblClick();
}
reset();
}, 300);
});
}
you can try ondblclick js listner like this :
document.getElementById('click').onclick = function() { console.log("click"); }
document.getElementById('dblclick').ondblclick = function() { console.log("double click"); }
<div>
<button id="click"> click </button>
<button id="dblclick"> double click </button>
</div>
You can try this way to differ click and dbclick:
document.getElementById('click').onclick = function() {
//do something if click
}
document.getElementById('click').ondblclick = function() {
//do something if dbclick
}
<div>
<button id="click"> click or dbclick? </button>
</div>
I am creating a Simon game and it works on round one, but once your each round two it immediately says incorrect.
jsfiddle
I reset all variables between the rounds, but it still seems to save them as it instantly says "Game Over!"
JS:
function makeGuess() {
...
var checkForComplete = setInterval(function () {
if (yourAnswer.length >= round) {
clearInterval(checkForComplete);
yourString = yourAnswer.toString();
correctString = correctAnswer.toString();
if (yourString === correctString) {
alert('Correct');
round++;
yourAnswer = [];
correctAnswer = [];
yourString = "";
correctString = "";
playSimon();
}
else {
alert("Game Over!");
}
}
}, 500)
Here is the playSimon() function:
function playSimon() {
setTimeout(function () {
color = Math.floor(Math.random() * 4);
if (color == 0) {
correctAnswer.push(0);
$('#redButton').addClass('lightOn');
setTimeout(function () {
$('#redButton').removeClass('lightOn');
}, 500);
}
else if (color == 1) {
correctAnswer.push(1);
$('#blueButton').addClass('lightOn');
setTimeout(function () {
$('#blueButton').removeClass('lightOn');
}, 500);
}
else if (color == 2) {
correctAnswer.push(2);
$('#greenButton').addClass('lightOn');
setTimeout(function () {
$('#greenButton').removeClass('lightOn');
}, 500);
}
else if (color == 3) {
correctAnswer.push(3);
$('#yellowButton').addClass('lightOn');
setTimeout(function () {
$('#yellowButton').removeClass('lightOn');
}, 500);
}
i++;
if (i <= round) {
playSimon();
}
else {
makeGuess();
}
}, 700);
}
Why is it alerting Game Over instantly on round 2?
Because you are binding the click events multiple times:
function makeGuess() {
$('#redButton').click(function() {
yourAnswer.push(0);
});
$('#blueButton').click(function() {
yourAnswer.push(1);
});
$('#greenButton').click(function() {
yourAnswer.push(2);
});
$('#yellowButton').click(function() {
yourAnswer.push(3);
});
...
}
Each time makeGuess() is called, the buttons are bound yet another click event listener. First time it's done (first level), there's only 1 event listener so it's working correctly, but from the second level onward each buttons are bound with 2 identical click listener, and when the player click a button, the function is called twice => yourAnswer is pushed twice immediately, which result in an incorrect answer => game over.
A quick fix is to unbind all click events on the 4 buttons before binding them all again, optimally immediately before the next playSimon() is called.
if (yourString === correctString) {
alert('Correct');
round++;
yourAnswer = [];
correctAnswer = [];
yourString = "";
correctString = "";
$('#redButton').unbind( "click" );
$('#blueButton').unbind( "click" );
$('#greenButton').unbind( "click" );
$('#yellowButton').unbind( "click" );
playSimon();
} else {
alert("Game Over!");
}
JsFiddle: https://jsfiddle.net/dfk2am7e/1/
AVAVT is right, however instead of unbinding, rather just bind the event once off.
I have updated your JSFiddle and optimized your code a little bit.
https://jsfiddle.net/dfk2am7e/3/
// Run this when the page has loaded to ensure HTML is there.
$(function(){
$('#redButton').click(function() {
yourAnswer.push(0);
});
$('#blueButton').click(function() {
yourAnswer.push(1);
});
$('#greenButton').click(function() {
yourAnswer.push(2);
});
$('#yellowButton').click(function() {
yourAnswer.push(3);
});
});
I have the following click function. I'm looking for a way so that when it is compleated, it will reset, and is ready to run again. How should i do that?
$('body').on('click', '#ConfirmBet', function () {
function randomImg() {
var imgs = $('.CoinImages');
var randomOne = Math.floor(imgs.length * Math.random());
$('#winner').fadeIn().attr('src', $(imgs[randomOne]).attr('src'));
$('#winner').addClass("WinImage");
if ($('#winner').attr('src') === $('.selected').attr('src')) {
alert('You Win!');
} else {
alert('You Lose!');
}
}
var counter = 5;
var c = setInterval(function () {
if (counter > 0) {
counter--;
$('#counter').html(counter);
$("#BetInput").val("");
$("#BetInput").prop("readonly", false);
$("#tCoin").removeClass("selected");
$("#ctCoin").removeClass("selected");
$(".CustomTextT").html("");
$(".CustomTextCT").html("");
$("#winner").removeClass("hidden");
} else {
clearInterval(c);
randomImg();
}
}, 1000);
});
Codepen
This codepen show's what my script does, but as you see, it keeps saying lose. no matter what image you hit.
In your setInterval handler function, you are removing the selected class in the counter > 0 case. Then in randomImg you are looking for an element with the selected class to determine which image was selected. Since you already removed the class, the check always fails.
I think you want to redo your setInterval handler logic like this:
if (counter > 0) {
counter--;
$('#counter').html(counter);
} else {
clearInterval(c);
randomImg();
$("#BetInput").val("");
$("#BetInput").prop("readonly", false);
$("#tCoin").removeClass("selected");
$("#ctCoin").removeClass("selected");
$(".CustomTextT").html("");
$(".CustomTextCT").html("");
$("#winner").removeClass("hidden");
}
I am using datatables plugin and using this for click:
$('.datatable').on('click', 'img#openpli-playlist', function(e) {
alert("You clicked OPENPLI ICON!");
});
Now I need to use jQuery plugin longclick and using this:
$('.datatable').longClick(function(e) {
alert("You clicked OPENPLI ICON!");
},1000);
So the problem is how can I add selector to longclick I try this for selector but is not working:
$('.datatable img#openpli-playlist').longClick(function(e) {
alert("You clicked OPENPLI ICON!");
},1000);
Can someone give me solution why is this not working?
Thanks
Simple fix will be:
var tmr = 0;
$(element).mousedown(function () {
tmr = setTimeout(function () {
alert("You clicked for 1 second! Wow!");
}, 1000);
}).mouseup(function () {
clearTimeout(tmr);
});
Now this can be used in delegation too:
var tmr = 0;
$(static_parent).on("mousedown", element, function () {
tmr = setTimeout(function () {
alert("You clicked for 1 second! Wow!");
}, 1000);
}).on("mouseup", element, function () {
clearTimeout(tmr);
});
Your solution:
var tmr = 0;
$('.datatable').on('mousedown', 'img#openpli-playlist', function(e) {
tmr = setTimeout(function () {
alert("You clicked OPENPLI ICON!");
}, 1000);
}).on('mouseup', 'img#openpli-playlist', function(e) {
clearTimeout(tmr);
});
As an improvement to previous answers, you can distinguish between click and long press in this way:
var tmr = 0;
var islong = 0;
$(element)
.mousedown(function () {
tmr = setTimeout(function () {
// Handle the long-press
alert("You clicked for 1 second!");
console.log("You clicked for 1 second!");
islong = 1;
}, 1000);
})
.mouseup(function () {
if (islong == 0) {
// Handle the click
alert("This is a click!");
console.log("This is a click!");
}
islong = 0;
clearTimeout(tmr);
});
In my game I want to make sure the start button is only clicked once each time it appears to stop it loading the function more than once.
I have written some code that counts the clicks and unbinds if the count is greater than zero.
var oneClick = 0;
$(".start-btn-wrapper").bind("click", function () {
oneClick++;
if (oneClick > 0) {
$(this).unbind("click");
}
newGame();
});
This works fine but I need a way to bind it again ready for the next time it appears (When the restart-btn is clicked) so I have written this to reset the count.
$(".restart-btn").click(function () {
resetGame();
oneClick = 0;
});
For some reason this doesn't do the job and I am looking to SO for a soloution
You're not binding again but just changing oneClick, which isn't even tested as the event handler to $(".start-btn-wrapper") isn't binded anymore.
But instead of unbinding/rebinding, which is costly, why not just test oneClick :
$(".start-btn-wrapper").bind("click", function () {
if (oneClick++ > 0) return;
newGame();
}
Note that if you just need two states, a boolean would be clearer :
var clickable = true;
$(".start-btn-wrapper").bind("click", function () {
if (!clickable) return;
newGame();
clickable = false;
}
$(".restart-btn").click(function () {
resetGame();
clickable = true;
});
jQuery has a built in method for exactly this use. It is .one()
So all you have to do is
$(".start-btn-wrapper").one('click',newGame);
and for the restart
$(".restart-btn").click(function () {
resetGame();
$(".start-btn-wrapper").one('click',newGame);
});
simple
var oneClick = 0;
$(".start-btn-wrapper").bind("click", function () {
if (oneClick > 0) {
return false;
}
oneClick++;
newGame();
});
$(".restart-btn").click(function () {
resetGame();
oneClick = 0;
});
var oneClick = 0;
function clickHandler() {
oneClick++;
if (oneClick > 0) {
$(".start-btn-wrapper").unbind("click");
}
newGame();
}
$(".start-btn-wrapper").bind("click", clickHandler);
$(".restart-btn").click(function () {
resetGame();
oneClick = 0;
$(".start-btn-wrapper").bind("click", clickHandler);
});