How to access event.target in Internet Explorer 8 with unobtrusive Javascript

Question

How to access event.target in Internet Explorer 8 with unobtrusive Javascript

Here is a function that retrieves the target element from a dropdown menu:

function getTarget(evt){

 var targetElement = null;

 //if it is a standard browser
 if (typeof evt.target != 'undefined'){
  targetElement = evt.target;
 }
 //otherwise for IE, use different 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;
 }

This function works well in Firefox, Chrome, Safari, and Opera, but encounters issues in IE8 (likely in previous versions as well). When I try to debug it with IE8, I receive an error "Member not Found" on this line:

targetElement = evt.srcElement;

followed by other subsequent errors, indicating that this is a key line causing the problem. Any assistance would be greatly appreciated.

Apologies for the formatting issue encountered earlier.

Below is the function again:

function getTarget(evt){

var targetElement = null;

//check for standard browser target
if (typeof evt.target != 'undefined'){
    targetElement = evt.target;
}
//handle IE specific syntax and target retrieval
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

javascript events internet-explorer-8

Answer 1

Answer №1

One issue lies with Internet Explorer, where the event object does not get passed as an argument to the handler function; instead, it is accessed through the global property (window.event):

function determineTarget(event){
 event = event || window.event; // retrieve window.event if argument is falsy (in IE)

 // obtain srcElement if target is falsy (IE)
 var targetNode = event.target || event.srcElement;

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

    return targetNode.parentNode;
 }
 else{
    return targetNode;
 }

Answer 2

One issue lies with Internet Explorer, where the event object does not get passed as an argument to the handler function; instead, it is accessed through the global property (window.event):

function determineTarget(event){
 event = event || window.event; // retrieve window.event if argument is falsy (in IE)

 // obtain srcElement if target is falsy (IE)
 var targetNode = event.target || event.srcElement;

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

    return targetNode.parentNode;
 }
 else{
    return targetNode;
 }

Answer 3

Answer №2

In my personal experience, the issue you are describing does not stem from where the event is sourced (window or handler parameter), but rather from how the event was triggered "correctly". For instance, if you have a text input field and invoke its onchange method without providing an event object, the event.srcElement property may end up being null.

To address this problem, consider using the code snippet shared by UniqueWebsite.

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

Here's an example of how to use this function:

triggerEvent(element,'change');

Answer 4

In my personal experience, the issue you are describing does not stem from where the event is sourced (window or handler parameter), but rather from how the event was triggered "correctly". For instance, if you have a text input field and invoke its onchange method without providing an event object, the event.srcElement property may end up being null.

To address this problem, consider using the code snippet shared by UniqueWebsite.

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

Here's an example of how to use this function:

triggerEvent(element,'change');

Answer 5

Answer №3

Smallest version of code:

function retrieveSelection(element) {
var event = element || window.event;
return event.srcElement || element.target;
}

Answer 6

Smallest version of code:

function retrieveSelection(element) {
var event = element || window.event;
return event.srcElement || element.target;
}

Answer 7

Answer №4

I also encountered this issue. The problem arises when using IE8, where the event needs to be accessed as window.event instead of through the parameters.

To resolve this issue, I made the following adjustments:


    function handleClick(event){
      if (isIE8()){
        clickedElement = window.event.srcElement;
      } else {
        clickedElement = event.target;
      }
    }

Answer 8

I also encountered this issue. The problem arises when using IE8, where the event needs to be accessed as window.event instead of through the parameters.

To resolve this issue, I made the following adjustments:


    function handleClick(event){
      if (isIE8()){
        clickedElement = window.event.srcElement;
      } else {
        clickedElement = event.target;
      }
    }

How to access event.target in Internet Explorer 8 with unobtrusive Javascript

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the process of incorporating a JavaScript node module into TypeScript?

Organizing AngularJS ng-repeat into sets of n items

Exploring the World with the vue-i18n Plugin

Struggling with TypeScript declaration files has been a challenge for me

Difficulty arises when applying hover effects to animations using callbacks

Incorporating JavaScript into a pre-existing HTML and CSS user interface

Do I need to manually destroy the directive scope, or will Angular take care of it

Efficiently Loading AJAX URLs using jQuery in Firefox

Swapping out the document.createElement() method for React.createElement()

Accepting insecure certificates in Chrome with Selenium-Webdriver in JavaScript: A Step-by-Step Guide

When downloading files in Chrome or Safari, the $ajax call is in a pending state, whereas in IE or Firefox,

What is the best way to implement Redux within Next.js 13?

How can one access the owner function from a different function?

Parallel Execution Issue with RxJS Observable forkJoin

Retrieve a specific value from an array of objects by searching for a particular object's value

Universal Module Identifier

Exploring Three.js on Cordova with WebGL

Is it possible for me to include a static HTML/Javascript/jQuery file in WordPress?

"Enhance your website with Ajax code that enables automatic refreshing of a PHP file, keeping its values up-to-date

What is the best way to address cookie issues while working on a full stack application that utilizes Vue and Express.js?