I've been following a tutorial from codrops where each item has a hover event and a click event that triggers an anime.js function.
My goal is to prevent certain items (grid cells) from triggering the anime.js function when clicked, while still allowing the hover function to work.
I attempted using simple CSS pointer-events, but that ended up disabling the hover function as well.
I even tried separating the two groups of items in JavaScript, but this caused the animation to behave differently (staggering the two different classes).
Various attempts to stop the default JavaScript behavior have had no impact on the code.
Help!!!
I have created a functioning CodePen - in my attempt there, I am trying to disable the click event for any grid item with the id="noClick", but it's not working.
$('noClick').observe('click', function(event) {
Event.stop(event);
});
This is the main function responsible for creating the 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);
});
});
The 'item' refers to:
this.DOM.grid = this.DOM.el.querySelector('.grid');
// The grid items
this.DOM.items = [...this.DOM.grid.children];
// Total number of grid items
this.itemsTotal = this.DOM.items.length;
I tried creating multiple items like this:
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');
// The 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];
// Total number of grid items
this.itemsTotal = this.DOM.allItems.length;
While this setup works, it interferes with the animation.
I believe the solution is simple and I am overlooking something. Any guidance or help would be much appreciated as I am eager to learn!