前端之家

  1. 首页
  2. 问答

无法在AngularJS的Internet Explorer 11中获取事件目标的父级

• 问答 
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
  }

});

我正在尝试查找某个元素是否在另一个元素内。在Internet Explorer 11中，我无法做到这一点。因此，我走了创建递归搜索DOM树函数的路线。但是，我也不能简单地使用jQuery的event.target property在有角度的js控制器中获取Internet Explorer 11中目标事件元素的父元素。此代码段无效，因为无论我单击什么，startElement.parentElement中的findClosestParent始终为null。此外，startElement.parentNode为空。 event.currentTarget.parentNode为空。我已经尝试了很多东西。没事。我尝试过的另一件事是，我不能简单地向要选择并使用纯香草js getElementById查询选择器的div中添加一个id，因为这些元素是在第三方库中抽象出来的。我非常希望能够使用事件目标或类似的东西来获取IE11中的dang元素。

我认为，可以归结为以下事实：根据https://developer.mozilla.org/en-US/docs/Web/API/Node/parentElement，对于IE，parentElement是“仅受Element支持”。那就是它的意思……这意味着我认为互联网浏览器认为event.target不是“ Element”。

aahhaa 回答：无法在AngularJS的Internet Explorer 11中获取事件目标的父级

这是使用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

angularjsinternet-explorer-11javascriptjqueryjquery-events
本文链接：https://www.f2er.com/2565576.html

大家都在问