Question

我想添加＆＃39; onclick＆＃39;某些元素的功能。这些元素完全针对这个CSS，将指针事件设置为＆＃39; auto＆＃39;：

.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中，我将其包括在内，以便在默认情况下禁用拖动功能。是其中一个类：

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

我应该如何将类defaultSlide附加到元素上？或者，我还能做什么，而不是if class方法，让我的拖动脚本立即返回？

通常情况下，我会添加类＆＃39; defaultSlide＆＃39;在首次创建元素时使用javascript中的这些元素，但在我的遗留代码错误上下文中需要大量代码

Answer 1

如果CSS完美地定位元素，则至少有两个选项：

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;
}

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。

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

1 个答案: