Question

I’ve looked everywhere for a code on how to stop event bubbling to occur, and I’ve found one from the Quirksmode website, which is this:

function doSomething(e){
    if(!e) var e = window.event;
    e.cancelBubble = true;
    if(e.stopPropagation) e.stopPropagation();
}

But I don’t know how and where to use it.
What is the ‘e’ parameter used as (or what should be passed as ‘e’)?
Is this function to be called in an event handler code?
…etc?

I need some help, please can someone give me some hint?

Basically I have 4 elements that have an ‘onchange’ handler called ‘updateAvailableAttributes()’, like this:

<select id="deliveryMethod" name="deliveryMethod" onchange="updateAvailableAttributes();"></select>

<select id="formatMethod" name="formatMethod" onchange="updateAvailableAttributes();"></select>

<select id="yearsMethod" name="yearsMethod" onchange="updateAvailableAttributes();"></select>

<select id="updateMethod" name="updateMethod" onchange="updateAvailableAttributes();"></select>

Here is the updateAvailableAttributes() script:

function updateAvailableAttributes() {
var form = document.forms["orderDefinition"];
form.elements["formChangeRequest"].value = "true";
$.ajax({
  type: "POST",
  url: "ajax/possibleValues.html",
  data: $("form#orderDefinition").serialize(),
  success: function(response){
    $('#usercontent .sleeve .toprow').html(response);

    applyValidation();
    radioButtonHighlightSelection();

  },
  error: function(response, ioArgs) {
         if (response.status == 601) {
             sessionTimedOut();
         } 
      }
});

// Display a "please wait" message
$("#waitingMsgOverlay, #waitingMsgBox, #waitingMsg, #waitingMsgParag").ajaxStart(function(){
      var map = document.getElementById("OrderMap");
      map.disableApplication();
      $(this).show();
      radioButtonHighlightSelection();
  }).ajaxStop(function(){
      var map = document.getElementById("OrderMap");
      map.enableApplication();
      $(this).hide();
      $("#toolpanel").height($("#orderMap").height());
      radioButtonHighlightSelection();
});}

My question is, how do I incorporate the ‘doSomething(e)’ with ‘updateAvailableAttributes()’ I have already on the ‘onchange’ event handler?

Thank you in advance.

Answer 1

e is the event. For example if u have a div inside another div and both of them have a js click handler called doSomething. so in the onclick attribute use onclick=”doSomething(event);” if you click on the inner div outer will not handle it now