如果元素包含某些CSS屬性，如何附加類

Question

我想為某些元素添加'onclick'功能。 使用此CSS完美地定位這些元素，將指針事件設置為“auto”：

.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方法; 有關稍微過時的瀏覽器的詳細信息和解決方法，請參閱此答案 。