We Keep Coding

Blocking F5 refresh not working in Chrome

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>

Javascript disabling a keyevent and enabling it back

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 .

How to trigger popup when browser tab closes in ReactJS?

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;
}
....

Detect if the mouse is over an element

How do I get a pretty simple true/false-statement if the mouse is over a div event = true else event = false
var test = $("#main-nav").on("mouseenter", function (e) {
e.preventDefault();
console.log(e.preventDefault());
return true;
});
if (test === true) {
//do something
} else {
//something different
}

If I understand your question correctly:
if($("#main-nav").is(":hover")) {
//do something
}else{
//something different
}
In pseudo code:
if the cursor is over #main-nav
do something
if it's not
do something else
If you want test to always be set:
var test = false;
$("#main-nav").on("mouseenter", function(e){
e.preventDefault();
test = true;
}).on("mouseleave", function(e){
e.preventDefault();
test = false;
});
This way,
if(test === true) {
//do something
}else{
//something different
}
will always work.

You can have a boolean (true/false) variable that will constantly update by doing this:
var hovering;
$("#main-nav").mouseenter(function(){
hovering = true;
});
$("#main-nav").mouseleave(function(){
hovering = false;
});
So whenever it is called it will tell you if the mouse is within your div:
if (hovering){
// mouse within div
} else {
// mouse not within div
}

If you necessarily need is as a variable:
var test = false;
$("#main-nav").on("mouseenter", function (e) {
test = true;
});
$("#main-nav").on("mouseout", function (e) {
test = false;
});
//....
if (test === true) {
//do something
} else {
//something different
}

how to detect if a link was clicked when window.onbeforeunload is triggered?

I have window.onbeforeunload triggering properly. It's displaying a confirmation box to ensure the user knows they are navigating (closing) the window and that any unsaved work will be erased.
I have a unique situation where I don't want this to trigger if a user navigates away from the page by clicking a link, but I can't figure out how to detect if a link has been clicked inside the function to halt the function. This is what I have for code:
window.onbeforeunload = function() {
var message = 'You are leaving the page.';
/* If this is Firefox */
if(/Firefox[\/\s](\d+)/.test(navigator.userAgent) && new Number(RegExp.$1) >= 4) {
if(confirm(message)) {
history.go();
}
else {
window.setTimeout(function() {
window.stop();
}, 1);
}
}
/* Everything else */
else {
return message;
}
}

You're looking for deferred event handling. I'll explain using jQuery, as it is less code:
window._link_was_clicked = false;
window.onbeforeunload = function(event) {
if (window._link_was_clicked) {
return; // abort beforeunload
}
// your event handling
};
jQuery(document).on('click', 'a', function(event) {
window._link_was_clicked = true;
});
a (very) poor man's implementation without jQuery's convenient delegation handling could look like:
document.addEventListener("click", function(event) {
if (this.nodeName.toLowerCase() === 'a') {
window._link_was_clicked = true;
}
}, true);
this allows all links on your page to leave without invoking the beforeunload handler. I'm sure you can figure out how to customize this, should you only want to allow this for a specific set of links (your question wasn't particularly clear on that).

var link_was_clicked = false;
document.addEventListener("click", function(e) {
if (e.target.nodeName.toLowerCase() === 'a') {
link_was_clicked = true;
}
}, true);
window.onbeforeunload = function() {
if(link_was_clicked) {
link_was_clicked = false;
return;
}
//other code here
}

You can differ between a link unload or a reload/user entering a different address unload s by using a timer. This way you know the beforeunload was triggered directly after the link click.
Example using jQuery:
$('a').on('click', function(){
window.last_clicked_time = new Date().getTime();
window.last_clicked = $(this);
});
$(window).bind('beforeunload', function() {
var time_now = new Date().getTime();
var link_clicked = window.last_clicked != undefined;
var within_click_offset = (time_now - window.last_clicked_time) < 100;
if (link_clicked && within_click_offset) {
return 'You clicked a link to '+window.last_clicked[0].href+'!';
} else {
return 'You are leaving or reloading the page!';
}
});
(tested in Chrome)