Double click ambiguity in Jquery? - javascript

I am trying to set some text in window for single and double click in jquery.
But I am facing the ambiguity for double click.
When trying to do double click , first single click function works and then double click works.
Similar question is here check here and it was very old. Also it has some problem.
Any new answer using the latest jquery version.
Check the live demo here of my problem live demo
This my code ,
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<a id="press" href="http://jquery.com">Click here</a>
<div id="log"></div>
<script>
$("#press").click(function(event) {
event.preventDefault();
$("#log").text("I am single click !");
return false;
});
$("#press").dblclick(function(event) {
event.preventDefault();
$('#log').text("I am double click !");
return false;
});
</script>
</body>
</html>
Hope our stack users will help me.

The way around the problem is to use a timeout for the click event to give the user time to doubleclick.
If the user clicks twice within a certain timeframe, it's a doubleclick, if the user only clicks once, it's a normal click:
$('#press').click(function (event) {
event.preventDefault();
if ( $(this).data('dblclicked') ) {
$('#log').text('No google today!');
clearTimeout( $(this).data('clicked') );
$(this).data('dblclicked', false);
}else{
var self = this;
$(this).data('dblclicked', true).data('clicked', setTimeout(function() {
$('#log').text('google !');
$(self).data('dblclicked', false);
},300));
}
});
FIDDLE

I got the closest solution by ,
<a id="press" href="javascript:void(0)" onclick="singleClick(event)"
ondblclick="doubleClick(event)">Click here</a>
<div id="log"></div>
My JavaScript will be ,
var timer;
var status = 1;
function singleClick(event) {
event.preventDefault();
status = 1;
timer = setTimeout(function() {
if (status == 1) {
alert("I am single click !");
document.getElementById("log").innerHTML ='I am single click !';
}
}, 500);
}
function doubleClick(event) {
event.preventDefault();
clearTimeout(timer);
status = 0;
alert("I am double click !");
document.getElementById("log").innerHTML = 'I am a double click!';
}

Related

button toggle event onkeyup from body

I need help with this function. Clicking a button, the onkeyup event present in the body tag must be deactivated, and then pressing it again must reactivate
<body onkeyup="NoPreview()">
...
</body>
function NoPreview() {
var preview = true;
if (preview == true) {
document.body.onkeyup = null;
preview = false;
} else {
return true; }
}
the function was deactivated, but clicking again on the button, does not reactivate.
You can keep a global variable and store the status of your setting, like this
<body onkeyup="NoPreview()">
<button onClick="toggleKeyup()">Toggle</button>
</body>
and the js:
var enableKeyup = true;
function toggleKeyup() {
enableKeyup = !enableKeyup;
}
function NoPreview() {
if(enableKeyup) {
// Your code here...
document.body.appendChild(document.createTextNode("."));
}
}
this way you don't have to add and remove events and you can have more settings for your NoPreview function.
Here's a pen: https://codepen.io/wyzix33/pen/bXBPbz
Hope it helps :)
Happy codding!

Why does jQuery click event only work once?

I am trying make speed units toggle when clicking. However, this only works once. I have run out of things to try. I also tried .click(), .live(), .toggle() (which only made it disappear and reappear), etc.
HTML:
<li id="wind">Wind speed</br>
<p class='windSpeedKm'></p>
</li>
Javascript:
var click = true;
$('#wind').on('click', function() {
if (click = false) {
$('#wind').html(function() {
$(this).html("Wind speed<br>" + windKm);
click = true;
});
} else if (click = true) {
$('#wind').html(function() {
$(this).html("Wind speed<br>" + windMi);
click = false;
});
}
});
This isn't exactly what you asked for, but this will save you so much time it is unbelievable. It has an auto convert function built in so you don't have to manually update both numbers. It doesn't replace unnecessary to replace html.
<li id="wind">Wind speed</br>
<p class='windSpeedKm' km="500">500</p>
</li>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
function toMiles(km) {
return parseFloat(km) * 0.62137;
}
$('#wind').on('click', function() {
console.log($(this).attr("km"));
windSpeedKm = $(this).find(".windSpeedKm");
km = windSpeedKm.attr("km");
if (km === windSpeedKm.html()) {
windSpeedKm.html(toMiles(km));
} else {
windSpeedKm.html(km);
}
});
</script>
There are a few syntax issues with the code:
var click = true;
$('#wind').on('click', function() {
if (click) {
$(this).html("Wind speed<br>" + windKm):
click = true;
} else {
$(this).html("Wind speed<br>" + windMi);
click = false;
}
});
Note: there isn't any need to set click = true or click = false in your example as falling into the if statement by checking the click assignment value, this will already be true! You would only do this if you wanted to toggle the boolean to false after confirming it was true.
click = true should be click == true;

How to prevent Bootbox from displaying twice after a double click?

I have a <ul> element that opens a bootbox when it's clicked. Double clicking this element triggers the onclick in JQuery twice
$("#email-list").on("click", ".list-group-item", function (e) {
bootbox.confirm("Send a forgotten password email to " + email + "?", function (result) {...}}
I tried using 'e.preventDefault()'
$(document).ready(function () {
$("#email-list").dblclick(function (e) {
e.preventDefault();
});
});
I even tried disabling clicking on the element but both failed. The bootbox still appears twice.
$("#email-list").bind('click', function () { return false; });
//...do stuff
$("#email-list").unbind('click');
Anyone has a suggestion?
Another solution can be to add:
bootbox.hideAll();
to hide any other bootboxes right before showing the bootbox like so:
bootbox.hideAll();
bootbox.confirm("Some Message " , function (result){/*do stuff*/}
Try this:
$("#email-list").on("click", ".list-group-item", function (e) {
if(!$('#myModal').is(':visible')){
$('#myModal').modal('show');
}
e.preventDefault();
}
Use the click event, then you can replace
e.preventDefault();
with
e.stopPropagation();
or
return false;
I figured the best way to do this is to separate the two events; onclick and dbclick, I used something like this, I hope it will save someone some time:
var DELAY = 700, clicks = 0, timer = null;
$(function () {
$("#email-list").on("click", ".list-group-item", function (e) {
clicks++; //count clicks
if (clicks == 1) {
//do stuff
clicks = 0; //after action performed, reset counter
}, DELAY);
} else {
clearTimeout(timer); //prevent single-click action
clicks = 0; //after action performed, reset counter
return false;
}
})
.on("dblclick", function (e) {
e.preventDefault(); //cancel system double-click event
});
}

JS Event CTRL + mouse over + hide text

I have to achieve this:
Hide text in a div
User will press Ctrl key, then put his mouse over a button - a javascript function has to be called, and the text in the div should be displayed
If the User releases the Ctrl key - the text should disappear (even if the mouse is on the button), similarly if the User moves the mouse out from the button - the text should disappear (even if the Ctrl key is pressed)
My work so far:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script>
loadHandler = function(){
$("#selector").mouseover(function(e){
if(e.ctrlKey) {
//what do I have to write here so that holding CTRL will be recognized ?
}
});
}
</script>
</head>
<body onload="loadHandler();">
<button type="button" onmouseover="document.getElementById('center').style.visibility = 'visible'">CTRL+mouseover</button>
<div id="center" onmouseout="this.style.visibility = 'hidden'">
<h1>Text text text</h1>
</div>
</body>
</html>
Link
I have to admit that I just started to learn JS so please help me out :)
how to make holding CTRL and mouse over be recognize at the same time ?
Working sample,
MouseEvent.shiftKey, MouseEvent.ctrlKey
MouseEvent.ctrlKey
MouseEvent.shiftKey
<img onmouseover="keypress_test(event)" onmouseout="keypress_test(event)">
function keypress_test(event) {
// false, no press,
// true, pressed
console.log(event.ctrlKey)
console.log(event.shiftKey)
if (event.ctrlKey) {
// hide text
}
}
Perfectly working version
$(document).ready(function(){
var keyPressed = false;
var mouseovered = false;
$("#center").mouseover(function(e){
doStuff();
mouseovered = true;
});
$("#center").mouseout(function(){
doStuff();
mouseovered = false;
});
$(document).keydown(function(e){
doStuff();
if (e.ctrlKey)
{
keyPressed = true;
}
else keyPressed = false;
});
$(document).keyup(function(e){
if (keyPressed)
{
keyPressed = false;
}
doStuff();
});
function doStuff()
{
if(mouseovered && keyPressed) $("#center").css({"color": "#000"});
else $("#center").css({"color": "#fff"});
}
});
I just haven't hidden the text by default. Or else It will be hard for yo find where it is currently. And don't forget to click on the body before checking. Else keypress wont be detected.
Working Fiddle

How can i prevent double submission of <a href>

Good Day Guys !
I have a problem here
I have 3
Prompt
Cert
Invoice
These 3 links load in the same page
if a click one link it will download.
but if i click it again i will not download
because i input a javascript like this
<script type="text/javascript">
{literal}
$(document).ready(function(){
var submitStatus = false;
$('a#promptButton').click(function(e){
if (!submitStatus) {
submitStatus = true;
} else {
e.preventDefault();
}
});
$('a#certButton').click(function(e){
if (!submitStatus) {
submitStatus = true;
} else {
e.preventDefault();
}
});
$('a#historyButton').click(function(e){
if (!submitStatus) {
submitStatus = true;
} else {
e.preventDefault();
}
});
$('a#invoiceButton').click(function(e){
if (!submitStatus) {
submitStatus = true;
} else {
e.preventDefault();
}
});
});
{/literal}
</script>
What will be my code if i want to download twice but i will prevent double submission?
Anybody can help me Please :(
This sample code may help to solve your issue.
HTML
<a href="http://www.google.com" target="_blank" >Google</a>
Yahoo
Stackoverflow
JS:
$('a').click(function(e){
$this = $(this);
if($this.data('disabled') == 'true'){
e.preventDefault();
setTimeout(function(){$this.data('disabled', 'false')}, 10); //Enable the anchor tag after 10 milliseconds
}else{
$this.data('disabled', 'true');
}
});
Demo: http://jsfiddle.net/rUrk4/6/
I have simple solution for you,
Just put this jQuery code after including JQuery ofcourse
<script type="text/javascript" src ="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script type="text/javascript">$('a:visited').click(function(){return false;});</script>
this will prevent click on all visited links in your page. :)
So first time the click will work second time will not..
I hope this much explaination will do :)

Categories

Resources