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 属性 在 Angular js Controller 中获取 Internet Explorer 11 中目标事件元素的父元素。此代码片段不起作用，因为无论我单击什么，findClosestParent 中的 startElement.parentElement 始终为 null。另外，startElement.parentNode 为 null。 event.currentTarget.parentNode 为空。我已经尝试了很多事情。什么都不起作用。我尝试的另一件事是，我不能简单地向我尝试选择的 div 添加 id 并使用纯 vanilla js getElementById 查询选择器，因为这些元素在第 3 方库中被抽象出来。我非常希望能够使用事件目标或类似的东西来获取 IE11 中的 dang 元素。
我认为这可以归结为一个事实，根据 https://developer.mozilla.org/en-US/docs/Web/API/Node/parentElement ，对于 IE，parentElement 是“仅在 Element 上受支持”。这就是它所说的...这意味着我认为 Internet Explorer 不认为 event.target 是一个“Element”。
最佳答案
这是一个使用 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>关于javascript - 无法在 AngularJS 的 Internet Explorer 11 中获取事件目标的父级，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60893664/