事件目标。classList没有indexOf方法

没有 indexOf 方法 classList 是arrayLike对象。 但有 contains() 一:

https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

这个 classList property 是一个 DOMTokenList collection 而且它没有 .indexOf() 方法以下是一些选项:

选项#1

转换 DOMToken列表 使用 Array.from() 检查方法:

var hasClass = Array.from(event.target.classList).indexOf('name') > -1;

选项#2

使用 classList.contains() method 要检查:

var hasClass = event.target.classList.contains('name');

选项#3

自 .indexOf() 方法存在于数组上,可以使用 .call() 方法调用该方法 类列表 (其中字符串 'name' 是您正在检查的类):

var hasClass = [].indexOf.call(event.target.classList, 'name') > -1;

选项#4

此选项具有自 className property 所有浏览器都支持。

这个 类名 属性返回元素类的字符串。您可以使用正则表达式来测试字符串是否包含所需的类(这包括类 name 是唯一的班级,当班级 名称 当存在多个类时用空格分隔)。

var hasClass = /(^| )name( |$)/i.test(event.target.className);

您也可以将其转换为函数:

function hasClass (element, className) {
  return new RegExp('(^| )' + className + '( |$)', 'gi').test(element.className);
}

选项#5

如果使用jQuery,只需使用 .hasClass() method :

var hasClass = $(event.target).hasClass('name');

在使用jQuery时,请使用 hasClass() 检查单击的元素是否包含指定的类。

此外,使用 $(this) 内部事件处理程序,以引用单击的元素。

确定是否为任何匹配的元素分配了给定的类。

$("button").on("click", function(event) {
    console.log($(this).hasClass('hello'));
});

您可以使用 indexOf() 在 classList 使用 toString() 功能:

event.target.classList.toString().indexOf('hello')

然后您可以按如下方式使用它:

if (~event.target.classList.toString().indexOf('hello')) {
  // The target's class list contains the phrase 'hello'
}

注: 对于以下类,这也将返回true: helloworld 和 _hello_ (就是这样 索引() 旨在执行)。