如何准确找出引发事件的原因？

Question

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

Answer 1

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 commentor 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?

Answer 2

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 aa tree like structure.

EDIT As per you comments 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.

Answer 3

If you want to know everything about the event, you can follow the advise of @Aesthete

$('#id').click(function(e){
         console.log(e)
          });

Then you can review the Console and inspect the output event.

Answer 4

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.