I am now trying to detect only the event of the browser close button of IE11 in JavaScript.
I was able to detect the browser close button with the onbeforeunload event, but I also have trouble picking up other page transition events.
This code is I trying on it.
window.onbeforeunload = function(event) {
alert('Sure you want to close ?');
}
Is there any good way to do it ?
Try using the addEventListener syntax:
window.addEventListener('beforeunload', function(){
alert('Sure you want to close ?');
});
Actually the onbeforeunload Event will be fired when you close the browser/tab , refresh the page(or F5), submit a form, or jump to other pages..etc
AFAIK, there is not a perfect way to detect which operation exactly USER do.But for your question, i guess there are some html tag like
To ABC
that fired the onbeforeunload Event when they are clicked. If it is true, may be you can remove the Event when the HREF was active so that the Event would not be fired.
Try codes blow:
<script type="text/javascript">
$(function() {
$("a").click(function() {
window.onbeforeunload = null;
location.href = $(this).attr("href");
return false;
});
});
window.onbeforeunload = function(e) {
return 'Sure you want to close ?';
}
</script>
Note that this would not prevent the refresh opreation to fired the onbeforeunload Event, but i hope to provide some ideas for resolving your problem.
Related
I need to capture the event that occurs when a user clicks a link on my chat application. I am using IE11.
Is there a way to capture the user clicking the link, when such a link could be dynamically added to the chat box (i.e. user sends "www.google.com" message) at any given time?
I have been using onbeforeunload by the way and while this detects the browser close event it will not detect the link click event, I am not sure why, so I was thinking that a jquery solution that checks the links on the page for an onclick could solve my problem...
Thanks,
dearg
Yes, you can use event delegation like:
$("#chatWindow).on('click', 'a', function () {
//do something
});
You could do it with a function like this:
$('a').on('click', function(){
//track clicked link here
return true; //to allow following the link this is the default behavior no need to add
return false; //prevent default behavior
});
I'm wondering if there is a way to submit the contents of a form when the user closes a tab/window. I've looked into the onunload and onbeforeunload events and think maybe this is the road to go down. I've tried
window.onbeforeunload = function(e) {
document.getElementById("my-form").submit();
};
but that doesn't work. Is there a way I can get this to work in the way I am describing?
If you can use JQuery, give this a try:
$(window).bind('beforeunload', function() {
$("#id-of-submit-button").click();
});
In chrome browser, when using this snippet:
$(document).on('keyup', function(){
alert("Hey");
});
Every time I press enter in the url bar (for example when I cut and paste the url of the page itself) the event listener fires.
Why does it happen?
EDIT:
It surprised me because url bar is not in document (maybe in window?) and firefox does not have this behaviour. When I look for e.target, Chrome Inspector shows body.
I thought this could be caused by event bubbling so I tried this:
$(document).on('keyup', function(e){
e.stopPropagation();
alert("Hey");
});
But it doesn't work.
How can I prevent it from being triggered?
This happens because once you hit enter in the omnibox, the focus turns to the page. If you tried the same thing with onkeydown, the omnibox would change nothing, because as you said, it isn't a part of the document. One way to filter the omnibox's false event out would be to check that every keyup has a pair keydown.
<script>
var down = false;
document.addEventListener('keydown', function (){
down = true;
}, false);
document.addEventListener('keyup', function (){
if(down === true){
alert('It was from the page!');
}
else{
alert('Omnibox. Ignore it.');
}
down = false;
}, false);
</script>
Demo.
Make your own HTML page and try it preferably, because PasteHTML.com stuffs it into an iframe. For it to work correctly there, click on the text first to give the iframe focus.
Demo.
Remember to use your mouse to focus on the omnibox and type, not a keyboard shortcut. (That fires the onkeydown event, creating a false positive)
Update: As of Chrome 35, this doesn't happen anymore. I don't know which version they fixed it on, however.
The solution for Chrome is simple: use keypress instead of keyup. This doesn't work in all cases (IE), so you may have to add a conditional to switch the type depending on the browser. However, this will solve your issue.
Note that looking for a specific keycode may negate your issue. Good luck.
You could filter for the keycode ...if that helps...13 is enter key
$(document).on('keyup', function(event){
if( parseInt(event.keyCode,10) !== 13 ){
alert("Hey");
}
});
A possible solution is to slightly delay the "keyup" event handler registration. This will skip the first "spurious" trigger that seems to happen in Chrome and Safari.
$(function() {
setTimeout(
function() {
console.log("Delayed event attachment");
$(document).bind('keyup', log);
}, 10);
});
function log(e) {
console.log(e.target.localName);
}
When the user goes history-back-1...how do I detect that? And then, alert "the user clicked back!"
Using binds (and jQuery preferably)
You generally can't (browser security restriction). You can tell if the user navigates away from the page (onbeforeunload, onunload fire) but you can't tell where they went unless you've set up your page to allow it.
HTML5 introduces the HTML5 History API; in conforming browsers, the onpopstate event will fire if the user navigates back to an earlier "page" on your site.
try:
window.onbeforeunload = function (evt) {
var message = 'Are you sure you want to leave?';
if (typeof evt == 'undefined') {
evt = window.event;
}
if (evt) {
evt.returnValue = message;
}
return message;
}
window.onpopstate=function()
{
alert("Back/Forward clicked!");
}
Following are the steps to detect back button click:
Register a mouse down event on body $('body').on('mousedown', 'on all li');
Now set a variable when mousedown event occur.
Check this variable when your location changes.
IF variable changes to true it means list clicked otherwise back button.
This work in my use case. This solution may help others because it depends on app design.
On the page you are looking at, you can add this piece of code to the onLoad event to move them back the page they were on.
if(history.length>0)history.go(+1)
If you want the alert then make it
if(history.length>0)alert("the user clicked back!")
Is it possible for me waiting for a user to click a link, and upon clicking the link the link's text would be obtained?
Maybe by using onClick?
If you mean handling the click event for the links in the page that the user is browsing then this is how:
// handle the load event of the window
window.addEventListener("load",Listen,false);
function Listen()
{
gBrowser.addEventListener("DOMContentLoaded",DocumentLoaded,true);
}
// handle the document load event, this is fired whenever a document is loaded in the browser. Then attach an event listener for the click event
function DocumentLoaded(event) {
var doc = event.originalTarget;
doc.addEventListener("click",GetLinkText,true);
}
// handle the click event of the document and check if the clicked element is an anchor element.
function GetLinkText(event) {
if (event.target instanceof HTMLAnchorElement) {
alert(event.target.innerHTML);
}
}
This is very simple using jQuery:
<script>
$(document).ready(function(){
$("a").click(function(){alert($(this).text());});
});
</script>
Of course, you'll probably want to do something other than alert the text.