jquery 在纯JavaScript中检测对类数组的点击

eagi6jfj  于 12个月前  发布在  jQuery
关注(0)|答案(2)|浏览(97)

我在jQuery中有这样的代码:

var clickClasses = '.btn1.btnh, .btn-consent-accepted, .btn-consent-save-accepted, .btn-consent-save-reject, .btn-consent-save-settings';

jQuery(document).on('click', clickClasses, function (e) {
//do something
});

字符串
它在jQuery中工作得很好,但我希望在普通的JavaScript中使用它。
任何帮助都非常感谢!
PS:有些类是动态加载的(aQuery),因此我的jQuery函数jQuery(document).on('click'....).

k2arahey

k2arahey1#

click事件侦听器添加到document,并检查是否有任何元素被Element.closest()单击。该方法从您调用它的元素开始运行DOM树,并在它传递的任何元素上计算选择器。
如果没有找到字符串中的元素,则返回null

const clickClasses = '.btn1.btnh, .btn-consent-accepted, .btn-consent-save-accepted, .btn-consent-save-reject, .btn-consent-save-settings';

document.addEventListener('click', event => {
  const clickTarget = event.target.closest(clickClasses);
  
  if (clickTarget === null) {
    return;
  }

  // do something.
});

字符串

roqulrg3

roqulrg32#

你可以将你的字符串转换成类数组,循环遍历它们,找到单个元素,并像下面这样在它们上面添加事件监听器

var clickClasses = '.btn1.btnh, .btn-consent-accepted, .btn-consent-save-accepted, .btn-consent-save-reject, .btn-consent-save-settings';
var classArray = clickClasses.split(", ");
classArray.forEach(function(singleClass) {
  document.querySelector(singleClass).addEventListener('click', handleClick);
});

function handleClick(e) {
  console.log("Element clicked " + e.target.innerHTML);
};

字符串

相关问题