javascript - 如果元素包含某些 CSS 属性，如何附加一个类

Question

我想为某些元素添加“onclick”功能。这些元素是这个 CSS 的完美目标，将指针事件设置为“自动”:

.custom-collections .o_slideshow .end-group {
    pointer-events: auto;
}

.custom-collections > .o_slideshow:first-child,
.custom-collections > .o_slideshow .o_slide[data-id="home_slide"],
.custom-collections > .o_slideshow:last-child {
    pointer-events: auto;
}

我的 javascript 目前允许元素被拖动(拖动)和预览(长按)。最终，我只需要它被预览。

在 javascript 中，如果“defaultSlide”是其中一个类，我将其包含在内以禁用拖动功能:

            if (event.target.classList.contains('defaultSlide')) {
                // If the slide contains 'defaultSlide', it shouldn't be draggable.
                return;
            }

我应该如何将类 defaultSlide 附加到元素？或者，除了 if class 方法之外，我还能做些什么来让我的拖动脚本立即返回？

通常，我会在首次创建元素时在 javascript 中将类“defaultSlide”添加到这些元素，但在我的不良遗留代码环境中这需要大量代码

Answer 1

如果该 CSS 完美地针对元素，您至少有两个选择:

1. Element#matches检查您调用它的元素是否与您提供的 CSS 选择器匹配。因此，您可以在获取事件时使用 Element#matches 而不是类检查，以查看元素是否与这些选择器匹配:

   var selectors = '.custom-collections .o_slideshow .end-group, ' +
                   '.custom-collections > .o_slideshow:first-child, ' +
                   '.custom-collections > .o_slideshow .o_slide[data-id="home_slide"], ' +
                   '.custom-collections > .o_slideshow:last-child';
   if (event.target.matches(selectors)) {
       // return;
   }
   

2. document.querySelectorAll返回与您提供的 CSS 选择器相匹配的元素集合。因此在页面加载时，您可以使用 querySelectorAll 获取所有与这些选择器匹配的元素并将类添加到它们:

   var selectors = '.custom-collections .o_slideshow .end-group, ' +
                   '.custom-collections > .o_slideshow:first-child, ' +
                   '.custom-collections > .o_slideshow .o_slide[data-id="home_slide"], ' +
                   '.custom-collections > .o_slideshow:last-child';
   document.querySelectorAll(selectors).forEach(function(e) {
       e.classList.add("defaultSlide");
   });
   

   ...然后使用您现有的代码在您收到事件时检查该类。

---

旁注:querySelectorAll 返回的对象最近才得到上面使用的forEach 方法；见this answer有关稍微过时的浏览器的详细信息和解决方法。