Cannot grab the parent of an event target in Internet Explorer 11 in AngularJS

Question

const findClosestParent = (startElement, fn) => {
  const parent = startElement.parentElement;
  if (!parent) return undefined;
  return fn(parent) ? parent : findClosestParent(parent, fn);
};

$document.on('click', event => {
  let target = event.target;
  if (findClosestParent(target, parent => parent.classList.contains('.calendar')) {
    // do some things
  }

});

I'm trying to find if an element is within another element. I can't do that with closest in Internet Explorer 11. So I went the route of creating a recursive searching up the DOM tree function. However, I also cannot simply grab the parent element of the targeted event element in Internet Explorer 11 in an angular js controller using jQuery's event.target property. This does snippet not work because startElement.parentElement in findClosestParent is always null no matter what I click. Also, startElement.parentNode is null. event.currentTarget.parentNode is null. I have tried so many things. Nothing works. Another thing I tried, I cannot simply add an id to the divs I am trying to select and use a pure vanilla js getElementById query selector because these elements are abstracted away in a 3rd party library. I would very much so like to be able to use event target or something similar to get me the dang element in IE11.

I think it boils down to the fact that, according to https://developer.mozilla.org/en-US/docs/Web/API/Node/parentElement, for IE, parentElement is "Only supported on Element". Thats what it says... what that means is that I think internet explorer doesn't think event.target is an "Element".

user_7557538 · Answer

Here is a simple solution using angularjs and jQuery Core.

Try clicking somewhere inside and outside the element with the calendar class.

(function () {
    'use strict';

    angular.module('app', []);

    angular.
        module('app')
        .controller('myController', ['$scope', function ($scope) {
            $(document).on('click', function ($event) {
                var nativeElement = $event.target;
                if ($(nativeElement).closest('.calendar').length) {
                    console.log('Inside a calendar');
                }
                else {
                    console.log('Outside a calendar');
                }
            });
        }])

})();

.calendar {
  margin: 20px;
  padding: 20px;
  border: 2px solid blue;
}

.widget {
  margin: 20px;
  padding: 20px;
  border: 2px solid green;
}




  
    
    
    
    
    
  
  
    
      
        
          Calendar
        
      
    
    
      
        
          Not a calendar

JSFiddle demo

Cannot grab the parent of an event target in Internet Explorer 11 in AngularJS

1 Answers