javascript - How to find out precisely what triggered the event? - Stack Overflow

admin管理员组

文章数量:1353245

I'm using some function with jQuery, for example:

$(window).one('beforeunload', function() {
//my code
});

But I really want to find out all about what has triggered this event and how.

I tried the following code:

$(window).one('beforeunload', function(e) {
alert(JSON.stringify(e));
});

But it raises exception about circular structure. Definitely though there must be some other way of differentiating and debugging through it.

How am I going to apply it?

I want to see what triggered this event, was it a link, a submitted form, a javascript, a page refresh, or a back and forth buttons or whatever, and it's all fine in that case. BUT if it was triggered by a call to open an external application, I want to discard the event and return null.

Example of external application launch:

<a href="skype:your_skype_name?call" >

Any ideas?

SOLVED

This is how I solved it.

I just make some script link first, to gain more control over the event:

<a href="javascript:void(0)" id="skype_click_ok"

Then I create a global variable to store the state of beforeunload:

var dontunload=0;

Then I manually process the link, but setting location.href, and changing variable state:

$('#skype_click_ok').click(function(){
dontunload=1;
location.href='skype:marilynbrusas?call';
});

Now my actual beforeunload event, note the one() was also changed to bind():

$(window).bind('beforeunload', function() {
  if (dontunload==1) dontunload=0;  //if triggered from our skype - do nothing, yet  cancel state for the next call
  else {  //Do the actual code
          // Fade out, before leaving the page.
      $('html#my_html').stop(true,false).css('overflow','hidden').animate({opacity:0},2000);
      // Lock content with invalid image hack
          $('body#my_body').prepend(
        $('<div>').attr({style:'position:fixed;height:100%;width:100%;left:0;top:0;z-index:900100;background-image:url(in-your-face)'})
      );
          // unbind the event
      $(this).unbind('beforeunload');
  }
});

EDIT3

Actually it's not solved. This trick does not work in IE and also the even triggers from javascript:void(0) links...

I'm using some function with jQuery, for example:

$(window).one('beforeunload', function() {
//my code
});

But I really want to find out all about what has triggered this event and how.

I tried the following code:

$(window).one('beforeunload', function(e) {
alert(JSON.stringify(e));
});

But it raises exception about circular structure. Definitely though there must be some other way of differentiating and debugging through it.

How am I going to apply it?

I want to see what triggered this event, was it a link, a submitted form, a javascript, a page refresh, or a back and forth buttons or whatever, and it's all fine in that case. BUT if it was triggered by a call to open an external application, I want to discard the event and return null.

Example of external application launch:

<a href="skype:your_skype_name?call" >

Any ideas?

SOLVED

This is how I solved it.

I just make some script link first, to gain more control over the event:

<a href="javascript:void(0)" id="skype_click_ok"

Then I create a global variable to store the state of beforeunload:

var dontunload=0;

Then I manually process the link, but setting location.href, and changing variable state:

$('#skype_click_ok').click(function(){
dontunload=1;
location.href='skype:marilynbrusas?call';
});

Now my actual beforeunload event, note the one() was also changed to bind():

$(window).bind('beforeunload', function() {
  if (dontunload==1) dontunload=0;  //if triggered from our skype - do nothing, yet  cancel state for the next call
  else {  //Do the actual code
          // Fade out, before leaving the page.
      $('html#my_html').stop(true,false).css('overflow','hidden').animate({opacity:0},2000);
      // Lock content with invalid image hack
          $('body#my_body').prepend(
        $('<div>').attr({style:'position:fixed;height:100%;width:100%;left:0;top:0;z-index:900100;background-image:url(in-your-face)'})
      );
          // unbind the event
      $(this).unbind('beforeunload');
  }
});

EDIT3

Actually it's not solved. This trick does not work in IE and also the even triggers from javascript:void(0) links...

• javascript
• jquery
• jquery-events

Share Improve this question Follow edited Jun 24, 2021 at 11:08 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Sep 5, 2012 at 21:51 AnonymousAnonymous 4,6301010 gold badges6666 silver badges9797 bronze badges 3

• A call to open an external application ? Please, could you explain better ? – WSD Commented Sep 5, 2012 at 22:10
• <a href="skype:your_skype_name?call" > - this does trigger a GET, and thus does trigger before-unload event. The external application means it has an internal protocol, other than http:, for example skype:. So it tries to launch a skype application instead of opening some page on the web. And I do want to cancel my event if it is the case. – Anonymous Commented Sep 5, 2012 at 22:15
• Can you please post that "solved" section as an answer and remove it from your answer? – Willi Mentzel Commented Mar 23, 2021 at 16:31

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

You can use the event.target.id selector to pass what element triggered the event, like so:

$(document).ready(function() {
    $("a").click(function(event) {
        alert(event.target.id);
    });
});

See jsfiddle. As the mentor mentioned, this will alert the ID of the element used to select, I just used that as an example as you didn't fully state what you wanted retrieved?

Using alert to display objects like events is fairly useless.

Why don't you try sending you event to the console?

function(event) {
    console.log(event);
}

This way you can expand you event object and view it in a a tree like structure.

EDIT As per you ments about the location of the event trigger: I haven't testing this, but this could be a way of stopping your unload event.

• Listen for click events for all a elements
• Check the element clicked points to an external application (doesn't start with http://)
• If not, bind an event handler for beforeunload that cancels the event immediately

• Otherwise unbind the previous handler

  $("a").click(function(event) {
    if(event.target.href.indexOf("http://") != 0) {
      $(window).on("beforeunload.override", function(e) {
        // Stop the 'beforeunload' event.
        return false;
      }
    }
    else {
      $(window).off("beforeunload.override");
    }
  }
  

Notice that this example is using something call Event Namespacing. By specifying that we want to listen to the beforeunload event, but we have our own namespace called override, we can add and remove the event handler safely without removing all other listeners for the beforeunload event.

Using target="_blank" solves this problem as well:

<a href="skype:your_skype_name?call" target="_blank">

It's rather ugly, but in my case it was the only solution that flawlessly worked across all browsers.

本文标签： javascriptHow to find out precisely what triggered the eventStack Overflow