Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Access event.target in IE8 unobtrusive Javascript

The following function gets the target element in a dropdown menu:

function getTarget(evt){

 var targetElement = null;

 //if it is a standard browser
 if (typeof evt.target != 'undefined'){
  targetElement = evt.target;
 }
 //otherwise it is IE then adapt syntax 
 else{
  targetElement = evt.srcElement;
 }

 //return id of <li> element when hovering over <li> or <a>
 if (targetElement.nodeName.toLowerCase() == 'li'){
  return targetElement;
 }
 else if (targetElement.parentNode.nodeName.toLowerCase() == 'li'){

    return targetElement.parentNode;
 }
 else{
  return targetElement;
 }

Needless to say, it works in Firefox, Chrome, Safari and Opera but it does not in IE8 (and I guess in previous versions as well). When I try to debug it with IE8 I get the error "Member not Found" on the line:

targetElement = evt.srcElement;

along with other subsequent errors, but I think this is the key line. Any help will be appreciated.


Sorry, for some reason the formatting is not correct.

Here is the function again

 function getTarget(evt){

var targetElement = null;

//if it is a standard browser get target
if (typeof evt.target != 'undefined'){
    targetElement = evt.target;
}
//otherwise it is IE then adapt syntax and get target
else{
    targetElement = evt.srcElement;
}

//return id of <li> element when hovering over <li> or <a>
if (targetElement.nodeName.toLowerCase() == 'li'){
    return targetElement;
}
else if (targetElement.parentNode.nodeName.toLowerCase() == 'li'){

            return targetElement.parentNode;
}
else{
    return targetElement;
}

}// end getTarget

like image 277
Mirko Avatar asked Apr 15 '10 01:04

Mirko


2 Answers

The problem is that in IE, the event object is not sent as an argument of the handler, it is just a global property (window.event):

function getTarget(evt){
 evt = evt || window.event; // get window.event if argument is falsy (in IE)

 // get srcElement if target is falsy (IE)
 var targetElement = evt.target || evt.srcElement;

 //return id of <li> element when hovering over <li> or <a>
 if (targetElement.nodeName.toLowerCase() == 'li'){
  return targetElement;
 }
 else if (targetElement.parentNode.nodeName.toLowerCase() == 'li'){

    return targetElement.parentNode;
 }
 else{
    return targetElement;
 }
like image 62
Christian C. Salvadó Avatar answered Sep 21 '22 05:09

Christian C. Salvadó


In my experience, the problem you describe is not related to where the event is obtained (window or handler parameter) but rather due to whether or not the event was raised "properly". For example, if you have a text input element and you call its onchange method without passing in an event object, the event.srcElement property will be null.

The following code from Jehiah is useful

function fireEvent(element,event){
   if (document.createEventObject){
      // dispatch for IE
      var evt = document.createEventObject();
      return element.fireEvent('on'+event,evt)
   }
   else{
      // dispatch for firefox + others
      var evt = document.createEvent("HTMLEvents");
      evt.initEvent(event, true, true ); // event type,bubbling,cancelable
      return !element.dispatchEvent(evt);
   }
}

Example call:

fireEvent(element,'change');
like image 22
Richard Collette Avatar answered Sep 19 '22 05:09

Richard Collette