javascript - 如何仅覆盖某些元素的 javascript click 事件？

Question

我正在学习 codrops 的教程。每个元素都有一个悬停事件，以及一个触发 anime.js 函数的点击事件。

我正在努力解决这个问题，因此某些元素(网格单元)在单击时不会触发 anime.js 功能，但悬停功能仍然有效。

我试过简单的 css pointer-events，但这会禁用悬停功能。

我在 JS 中将这两个组构造为单独的元素，但是动画的工作方式并不相同(它交错了两个不同的类)。

我已经尝试过停止默认的 javascript 行为，但它似乎对代码没有影响。

求助!!!

我已经制作了一个正常运行的 codepen - 在该选项中，我试图禁用任何具有 id="noClick"的网格元素的点击事件 - 但无济于事。

$('noClick').observe('click', function(event) {
    Event.stop(event); 
});

这是创建事件的主要函数

this.DOM.items.forEach((item, pos) => {
                // The item's title.
                const title = item.dataset.title;
                // Show the title next to the cursor.
                item.addEventListener('mouseenter', () => cursor.setTitle(title));
                item.addEventListener('click', () => {
                    // Position of the clicked item
                    this.pos = pos;
                    this.title = title;
                    // Start the effect and show the content behind
                    this.showContent();
                    // Force to show the title next to the cursor (it might not update because of the grid animation - the item under the mouse can be a different one than the one the user moved the mouse to)
                    cursor.setTitle(title);
                });
            });

“元素”在哪里

this.DOM.grid = this.DOM.el.querySelector('.grid');
            // Thr grid items
            this.DOM.items = [...this.DOM.grid.children];
            // totla number of grid items
            this.itemsTotal = this.DOM.items.length;

我尝试创建多个元素

 this.DOM.grid = this.DOM.el.querySelector('.grid');
            this.DOM.yesClick = this.DOM.el.querySelector('.yes-click'); 
            this.DOM.yesClickTwo = this.DOM.el.querySelector('.yes-click-2');            
            this.DOM.noClick = this.DOM.el.querySelector('.no-click');

            // Thr grid items
            this.DOM.items = [...this.DOM.yesClick.children, ...this.DOM.yesClickTwo.children];
            this.DOM.itemsNo = [...this.DOM.noClick.children];
            this.DOM.allItems = [...this.DOM.noClick.children, ...this.DOM.yesClick.children, ...this.DOM.yesClickTwo.children];


            // totla number of grid items
            this.itemsTotal = this.DOM.allItems.length;

这行得通，但会弄乱动画。

Here is the codepen

我觉得这真的很简单，我遗漏了一些东西。希望学习，所以向正确的方向插入或任何帮助将不胜感激!

Answer 1

1.您有多个具有相同 ID 的元素。但ID属性必须是唯一的。

2. 您使用了 $('noClick')，但 ID 选择器看起来像 #noClick

如果你想标记几个元素，使用类并选择它们，如 .elementclass。元素可以有多个类，用空格分隔。