无法在 AngularJS 中的 Internet Explorer 11 中获取事件目标的父级
Posted
技术标签:
【中文标题】无法在 AngularJS 中的 Internet Explorer 11 中获取事件目标的父级【英文标题】：Cannot grab the parent of an event target in Internet Explorer 11 in AngularJS 【发布时间】：2020-07-08 15:28:14 【问题描述】：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 在 Angular js 控制器中获取 Internet Explorer 11 中目标事件元素的父元素。这确实 sn-p 不起作用，因为无论我点击什么，findClosestParent 中的startElement.parentElement 始终为空。此外，startElement.parentNode 为空。 event.currentTarget.parentNode 为空。我已经尝试了很多东西。没有任何效果。我尝试过的另一件事是，我不能简单地将 id 添加到我尝试选择的 div 并使用纯 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”。
【问题讨论】：
我的回答终于解决了你的问题吗？ 【参考方案1】：这是一个使用 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
【讨论】：
以上是关于无法在 AngularJS 中的 Internet Explorer 11 中获取事件目标的父级的主要内容，如果未能解决你的问题，请参考以下文章
带有 angularjs 的 Internet Explorer 中的 Blob url
AngularJS Node 应用程序下载而不是在 Internet Explorer 中加载