I'm quite curious for keyup and keydown function.
I wanted to disable the keys for like 2 seconds then enabling back them.
I've set a function setTimeout to ensure to enable it back under this function continueExecution.
The issue is , i'm trying to figure out how to disable it.
I've tried e.preventDefault();
Tried sending false back still no luck.
Is there something I'm missing?
Event handler:
var keysDown = {},
ignore = false,tId;
addEventListener("keydown", function(e) {
if (ignore) return false;
keysDown[e.keyCode] = true;
}, false);
addEventListener("keyup", function(e) {
if (ignore) return false;
delete keysDown[e.keyCode];
}, false);
Function:
function doStuff() {
hero.y = 0;
ignore=true;
tId = setTimeout(function() { ignore=false; continueExecution() }, 2000) //wait two seconds before continuing
}
function continueExecution()
{
hero.y = -281;
}
Your eventListener functions must not be anonymous:
function keyDown(e) {
keysDown[e.keyCode] = true;
}
addEventListener("keydown",keyDown,false);
function keyUp (e) {
delete keysDown[e.keyCode];
}
addEventListener("keyup",keyUp,false);
Now you can remove the Listeners:
removeEventListener("keyup",keyUp,false);
Alltogether:
function keyDown(e) {
keysDown[e.keyCode] = true;
}
function keyUp (e) {
delete keysDown[e.keyCode];
}
function setEvents(){
addEventListener("keyup",keyUp,false);
addEventListener("keydown",keyDown,false);
}
setEvents()
function yieldEvents(time){
removeEventListener("keyup",keyUp,false);
removeEventListener("keydown",keyDown,false);
setTimeout(setEvents,time);
}
yieldEvents(2000);//e.g.
Try setting a flag
// Handle keyboard controls
var keysDown = {},
ignore = false,tId;
addEventListener("keydown", function(e) {
if (ignore) return false;
keysDown[e.keyCode] = true;
}, false);
addEventListener("keyup", function(e) {
if (ignore) return false;
delete keysDown[e.keyCode];
}, false);
function doStuff() {
ignore = true;
tId = setTimeout(function() { ignore=false; continueExecution() }, 2000) //wait two seconds before continuing
}
if you use jquery you can write the code like this :
$("your_elem").on("keyup",function(){
$(this).off("keyup")
});
else if you want to return it back you can replace the off by the on .
Related
Here is the code that worked earlier, but now doesn't work anymore. Does anyone know why?
document.onkeydown = function()
{
if(event.keyCode==116) {
event.keyCode=0;
event.returnValue = false;
}
}
// To avoid refresh, using context menu of the browser
document.oncontextmenu = function() {event.returnValue = false;}
You refer to event in your functions, but you never actually pass it:
document.onkeydown = function(){ /* ... */ }
document.oncontextmenu = function() {event.returnValue = false; }
// should be
document.onkeydown = function(event){ /* ... */ }
document.oncontextmenu = function(event) {event.returnValue = false; }
In the first version of the oncontextmenu you set 'returnvalue' of object 'event' to false, but it doesnt exist because you never actually pass it on to the function.
Recieve the event in your function
document.onkeydown = function(event)
{
if(event.keyCode==116) {
event.keyCode=0;
event.returnValue = false;
}
}
Or Try preventing the action by that key
document.onkeydown = function(event)
{
if(event.keyCode==116) {
event.preventDefault();
}
}
try this
<script>
window.onload = function () {
document.onkeydown = function (e) {
return (e.which || e.keyCode) != 116;
};
}
</script>
In JavaScript mousedown event followed by mouseup and click. so in click event three of this event execute. But in my task, i want to do the different task for mousedown and click.
if anyone press and hold mouse for a while then a list will show and click event will not execute.
when just click then the task for the click will execute.
It is as like as chrome back arrow functionality.
anyone to help. Thanks in advance.
You can do it like this:
var pressTimer, longClick;
function mouseUpCheck() {
clearTimeout(pressTimer);
window.removeEventListener('mouseup', mouseUpCheck);
}
document.querySelector('.link').addEventListener('mousedown', function(){
window.addEventListener('mouseup', mouseUpCheck);
pressTimer = window.setTimeout(function() { longClick = true; alert('long click'); },2000);
});
document.querySelector('.link').addEventListener('click', function() {
if (longClick) {
event.stopPropagation();
event.preventDefault();
longClick = false;
return;
}
alert('click');
});
<a class="link">click me</a>
Mousedown doens't generate multiple events for down, so here I've used a setInterval to keep checking if the mouse is still down.
Just done a quick mod, forgot that a mouseup on an element doesn't get triggered if you mouse out of the element. So here I'm attaching the event to the window instead.
var d = document.querySelector('div');
var dtime;
var i;
d.onmousedown = function () {
window.addEventListener('mouseup', mouseUpCheck);
dtime = new Date();
i = setInterval(function () {
if (dtime) {
var t = new Date();
if (t.getTime() - dtime.getTime() >= 2000) {
dtime = null; //stop now..
console.log('2 second mousedown');
}
}
}, 50);
}
function mouseUpCheck() {
dtime = null;
window.removeEventListener('mouseup', mouseUpCheck);
clearInterval(i);
}
<div>Click Hold for 2 seconds</div>
For both event working in same selector:
var pressTimer, longClick;
function mouseUpCheck() {
clearTimeout(pressTimer);
window.removeEventListener('mouseup', mouseUpCheck);
}
document.querySelector('.mySelector').addEventListener('mousedown', function(){
window.addEventListener('mouseup', mouseUpCheck);
pressTimer = window.setTimeout(function() {
longClick = true;
//code for longclick
},2000);
});
document.querySelector('.mySelector').addEventListener('click', function(event) {
if (longClick) {
longClick = false;
event.stopPropagation();
event.preventDefault();
return;
}
// code for simple click
});
I have a enrollment form with some customer related information. If user form is half filled and the user is going to close the tab, then I'll trigger the popup with option of save and exit, exit.
I have some jQuery solution. But nowadays it's not working in all browsers.
Jquery sample Code:
'use strict';
$(document).ready(function() {
$.fn.addEvent = function (obj, evType, fn) {
if (obj.addEventListener) {
obj.addEventListener(evType, fn, false);
return true;
} else if (obj.attachEvent) {
var r = obj.attachEvent('on'+evType, fn);
return r;
} else {
return false;
}
};
$.fn.KeepOnPage = function (e) {
var doWarn = 1;
if (!e) {
e = window.event;
}
if (!e) {
return;
}
if (doWarn == 1) { // and condition whatever you want to add here
e.cancelBubble = true;
e.returnValue = 'Warning!\n\nNavigating away from this page will delete your text if you haven\'t already saved it.';
}
if (e.stopPropagation) {
e.stopPropagation();
}
};
$.fn.addEvent(window, 'beforeunload', $.fn.KeepOnPage);
});
But we need solution in ReactJS. Is there any React library for the browser unload?
Thanks,
Thangadurai
You can add and remove an event listener for the 'beforeunload' event within your componentDidMount and componentWillUnmount lifecycle functions.
https://facebook.github.io/react/docs/component-specs.html
https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload
Example:
...
componentDidMount() {
window.addEventListener('beforeunload', this.keepOnPage);
}
componentWillUnmount() {
window.removeEventListener('beforeunload', this.keepOnPage);
}
keepOnPage(e) {
var message = 'Warning!\n\nNavigating away from this page will delete your text if you haven\'t already saved it.';
e.returnValue = message;
return message;
}
....
Can any one please tell me how to disable the following div?
<div class="continue-but submit">Submit</div>
I have tried
$('.submit').click(function () {
$(".submit").prop('disabled', true);
if (error >= 1) {
// Errors
$(".submit").prop('disabled', false);
return false;
}
};
But there was no change. Can any one please help me?
Thanks.
You can update your code to following
$('.submit').click(function () {
var obj = $(this);
obj.prop('disabled', true);
var originalonClick = obj.onclick; // storing current click handler
obj.onclick = function(){return false}; // updating click handler
if (error >= 1) {
// Errors
$(".submit").prop('disabled', false);
obj.onclick = originalonClick; // restoring click function
return false;
}
};
You need to use preventDefault(); function, which ensures that click event will cancel out when you return false:
$('.submit').click(function (e) {
e.preventDefault();
$(".submit").prop('disabled', true);
if (error >= 1) {
// Errors
$(".submit").prop('disabled', false);
return false;
}
};
There's been a recent trend to use spacebar as a meta key while performing certain drag actions in more graphical apps.
The problem is that the mouse flickers while holding spacebar (or any non-modifier key) down and moving your mouse: http://jsfiddle.net/S3AJr/4/
Example code:
$(function() {
var count = 1,
isSpaceBarPressed = false;
$('body').on('keydown', function(e) {
e.preventDefault();
if (e.which === 32) {
isSpaceBarPressed = true;
}
});
$('body').on('keyup', function(e) {
e.preventDefault();
if (e.which === 32) {
isSpaceBarPressed = false;
}
});
$('body').on('mousemove', function(e) {
if (isSpaceBarPressed) {
e.preventDefault();
$('.pizza').text(count++);
}
});
});
Is there a way to fix this or am I limited to ctrl, alt, shift and meta?
Easy fix bro!
// note include underscore-min.js for our throttle function
$(function () {
var count = 1,
isSpaceBarPressed = false;
var throttledRender = _.throttle(function () {
$('.pizza').text(count);
}, 200);
$('body').on('keydown', function (e) {
e.preventDefault();
if (e.which === 32) {
isSpaceBarPressed = true;
}
});
$('body').on('keyup', function (e) {
e.preventDefault();
if (e.which === 32) {
isSpaceBarPressed = false;
}
});
$('body').on('mousemove', function (e) {
if (isSpaceBarPressed) {
e.preventDefault();
count++;
throttledRender();
}
});
});
The problem is that you are rendering WAY too often (every time the event fires). Instead, you want to increment your variable every time but only render periodically. See this forked fiddle using underscore's throttle function. If you prefer, there is a jQuery plugin for this too.