Question

I would like to detect which HTML element was double clicked. Seems to something not fire in my code. Following is my HTML code structure where you double click detect which item is clicked.

  <div id="mainWrapper">
       <div id="Banner" name="Banner" class="editable">This is the banner</div>
       <div id="MainMenu" class="editable">This is the main menu</div>
       <div id="LeftSideBar" class="editable">This is the submenu or left sidebar content</div>
       <div id="MainContent"class="editable">Here is the main content</div>
       <div id="RightSideBar" class="editable">Here are commercial ads</div>
       <div id="Footer"class="editable">This is the footer
          <a href="index.php">Go Home</a>
       </div>
  </div>

External JavaScript

window.onload = function(){
  // Listen to the double click event.
  if ( window.addEventListener )
     document.body.addEventListener( 'dblclick', onDoubleClick, false );
}

Get the element which fired the event. This is not necessarily the element to which the event has been attached.

function onDoubleClick( ev ){
  var element = ev.target || ev.srcElement;  //target = W3C,  srcElement = Microsoft
  alert(ev.type); //displays which event has fired

  var targ;
  if (!ev) var e = window.event;
  if (ev.target) targ = ev.target;  
  else if (ev.srcElement) targ = ev.srcElement;

  alert(ev.target); //displays which type of html element has been clicked (it shows div but not which div)

  // Find out the div that holds this element.
  var name;
  do {
    element = element.parentNode;
  }
  while ( element && ( name = element.nodeName.toLowerCase() ) && ( name != 'div' || 

  element.className.indexOf( 'editable' ) == -1 ) && name != 'body' )

  alert("The class name for the element is " + element.className); // I get nothing
  alert("The node name for the html element is " + element.nodeName);// I get "body"
}

Answer 1

I’m not sure exactly what it is you’re trying to accomplish. Is it so people can edit things? I’d be tempted to apply the onclick event listener just to those items you want to be editable. If they all have “editable” css classes, doing so is trivial with jquery:

$('.editable').dblclick(dblclickFunc)

This would apply an event listener to every element with a class of editable. However, to make it more useful, I’d change that to

$('.editable').dblclick(function(e){ dblclickFunc(e, this);  })

and for the function

dblclickFunc(e, el){
     alert('received an event of type ' + e.type + ' on ' + el.tagName);
}

So you’ve got a reference to the element that sent the event. From there, you could check IDs, or even go so far as to loop through all your editable elements and compare them to the one that got passed to you. Once you have a match, you know precisely which element was clicked on.