What is this code trying to do? event.returnValue=false event.cancelBubble=true;

Question

I am trying to figure out what the code below is trying to do. Usually if I am trying to change the url then document.location= url is enough. I know Event.cancelBubble is used to prevent clicks from propagrating to other views but in this case we're changing the URL and event is not declared anywhere in the javascript so what is it and event.returnValue=false trying to achieve in this case?

function gotoUrl(url) {
   document.location= url;
   event.returnValue=false;
   event.cancelBubble=true;
}

Answer 1

This is the IE 8 (and less) proprietary way to cancel an event (event.returnValue = false) and prevent it from bubbling up to other DOM objects (event.cancelBubble = true). In IE's world event was a Global and since only one event can ever be happening at one time, the current event object would always be found by using the Global event object. You didn't have to declare a callback function argument to access it.

But, what you should understand about cancelling events is that you are not cancelling the execution of the previously set up event handler (you need to de-register the event handler for that). What you are doing when you cancel an event is cancelling the "native" behavior of that event on the element in question. So, with your code, the location will still be changed because gotoUrl() is still being invoked and its code will still run. But, depending on what type of element this event callback is registered to and what kind of event is was handling, that native behavior will be cancelled.

Some simple examples would be

• A form element's submit event callback might decide to cancel the submit event if form validation fails -- the event handler will still run, but the actual event (submitting the form data) won't.
• A hyperlink's click event callback might be cancelled for some reason. The code in the click event callback will run, but the native behavior (the navigation) won't. You can see this in my example below.

For someone interested in writing cross-browser compatible code, the following was very common back in the day. (The Stack Overflow snippet environment doesn't allow navigation, but you can do that test here in this Fiddle):

var btnWire = document.getElementById("wire");
var btnUnwire = document.getElementById("unwire");
var link = document.getElementById("anchor");

function foo(evt){
  alert(evt.currentTarget.nodeName + " was " + evt.type + "ed!");
}

function foo2(evt){
  // This click event handler for the link actually cancels the event
  // so that native behavior (navigation in this case) won't happen
  // and the event won't bubble.
  cancelEvent(evt, false);
  
  // But the event callback itself (this function) will still run:
  alert(evt.type + " cancelled on " + evt.currentTarget.nodeName);
}

// Set up event handler for first button, link and document
wireUp(btnWire, "click", foo , false);
wireUp(link, "click", foo2, false);

// This won't fire for the link at all because that event is cancelled
// And it won't fire for the first button after the 3rd button is clicked
wireUp(document, "click", foo, false); 

// Set up event handler on second button that removes first button's event handler 
wireUp(btnUnwire, "click", function(){ unWire(document, "click", foo , false); }, false);

// Cross-browser event wiring code
function wireUp(element, eventName, callback, capture){
  // Use feature detection to determine what event model is supported
  if(window.addEventListener){
    console.log("DOM Event Model Supported");  
    element.addEventListener(eventName, callback, capture);
  } else if(window.attachEvent) {
    console.log("IE 8 or less Event Model");
    element.attachEvent("on" + eventName, callback);
  } else {
    console.log("Only DOM Level 0 support");
    element["on" + eventName] = callback;
  }
}

// Cross-browser event removing code
function unWire(element, eventName, callback, capture){
  // Use feature detection to determine what event model is supported
  if(window.removeEventListener){
    // DOM Event Model Supported
    element.removeEventListener(eventName, callback, capture);
  } else if(window.attachEvent) {
    // IE 8 or less Event Model
    element.detachEvent("on" + eventName, callback);
  } else {
    // Only DOM Level 0 support
    element["on" + eventName] = null;
  }
}

// Cross-browser event cancellation code
function cancelEvent(event, bubble){
  // Make sure a proper reference to the event is gotten
  event = event || window.event;

  // Use feature detection to determine what event model is supported
  if(window.addEventListener){
    // DOM Event Model Supported
    event.preventDefault();
    !bubble ? event.stopPropagation() : null;
    console.log(event.type + " event and bubbling cancelled with DOM standard.");
  } else {
    // IE 8 or less Event Model
    event.returnValue = false;
    !bubble ? event.cancelBubble = true: null;
    console.log(event.type + " event and bubbling cancelled with IE Model.");    
  }
}

<button type="button" id="wire">Click to test Event Callback</button>
<div>
  <a href="http://cnn.com" target="_blank" id="anchor">Navigation won't work because click event is cancelled</a>
</div>
<button type="button" id="unwire">Click to Remove Event Handler on document</button>

References:

• event.returnValue
• event.cancelBubble