如何获取目标元素的正确类名的索引?

Question

我有一个目标元素，它是一个SVG，它有两个属性baseVal和aniVal，所以我试图从SVG目标元素中获取正确的indexOfclassName。

$('body').on('click', function (e) {
if (e.target.className.baseVal && e.target.className.baseVal.indexOf('close') > -1) {
return;
} else if (e.target.className && e.target.className.indexOf('close') > -1)
$(e.target).closest(".popover").remove();
$('.popover').each(function () {
whatever the code;
});
});

Answer 1

className

在"普通"HTML 元素上是一个纯字符串，只有当你处理 SVG 目标元素时，它才会是SVGAnimatedString的实例，然后具有baseVal属性。

你试图在你的if/else中考虑到这一点 - 但不完全正确。该值仍然可以是SVGAnimatedString的实例，但它的baseVal可能不包含close- 在这种情况下，您进入else分支，在那里它尝试在该SVGAnimatedString上调用indexOf，而它没有。

您需要在此处将 if 条件分解为两个单独的检查：

$('body').on('click', function (e) {
if (e.target.className.baseVal !== undefined) {
if (e.target.className.baseVal.indexOf('close') > -1) {
return;
}
} else if (e.target.className && e.target.className.indexOf('close') > -1)
$(e.target).closest(".popover").remove();
$('.popover').each(function () {
//whatever the code;
});
}
});

(新的"内部"if是否仍然需要一个 else 分支，取决于当目标元素是 SVG 但不包含close时您希望发生什么。

>Edit：修改了对baseVaL属性的检查以!== undefined，因为否则空的baseVal也会使其进入else分支。

Answer 2

你认为这会有帮助吗？

$('body').on('click', function (e) {
if (e.target.classList.contains('close')) {
$(e.target).closest(".popover").remove();
}
$('.popover').each(function () {
// whatever the code;
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="close">Click 1 </button>
<button>Click 1 </button>
<button>Click 1 </button>
<button>Click 1 </button>