Невозможно получить родительский объект для цели события в Inte rnet Explorer 11 в AngularJS - PullRequest
Новая
       8

Невозможно получить родительский объект для цели события в Inte rnet Explorer 11 в AngularJS

2 голосов
/ 27 марта 2020 
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
  }

});

Я пытаюсь найти, находится ли элемент внутри другого элемента. Я не могу сделать это с ближайшим в Inte rnet Explorer 11. Поэтому я пошел по пути создания рекурсивного поиска по функции дерева DOM. Однако я также не могу просто получить родительский элемент целевого элемента события в Inte rnet Explorer 11 в angular js контроллере, используя jQuery s event.target property. Этот фрагмент кода не работает, потому что startElement.parentElement в findClosestParent всегда равно нулю независимо от того, что я нажимаю. Кроме того, startElement.parentNode является нулевым. event.currentTarget.parentNode равно нулю. Я перепробовал так много вещей. Ничего не работает Еще одна вещь, которую я попробовал, я не могу просто добавить идентификатор в div, которые я пытаюсь выбрать, и использовать чистый ванильный js getElementById селектор запросов, потому что эти элементы абстрагируются в сторонней библиотеке. Мне бы очень хотелось иметь возможность использовать цель события или что-то подобное, чтобы получить элемент dang в IE11.

Я думаю, что это сводится к тому, что, согласно https://developer.mozilla.org/en-US/docs/Web/API/Node/parentElement, для IE, parentElement «Поддерживается только на Element». Вот что он говорит ... что это означает, что я думаю, что inte rnet explorer не считает event.target "Element".

1 Ответ

0 голосов
/ 28 марта 2020

Вот простое решение с использованием angularjs и jQuery Core.

Попробуйте щелкнуть где-нибудь внутри и снаружи элемента с классом calendar. 

(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;
}
<!DOCTYPE html>

<html lang="en" ng-app="app">
  <head>
    <meta charset="utf-8" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="module.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body ng-controller="myController">
    <div class="calendar">
      <div class="ancestor-2">
        <div class="ancestor-1">
          Calendar
        </div>
      </div>
    </div>
    <div class="widget">
      <div class="ancestor-2">
        <div class="ancestor-1">
          Not a calendar
        </div>
      </div>
    </div>
  </body>
</html>

JSFiddle demo

...