CODEWITHSUNDEEP
javascripteventsstoppropagation
Developer
Developer

Reputation: 1

Trigger event more than one time on the same node llist

This is my html code in loop


act.product_color = document.querySelectorAll(".product_color");




act.product_color.forEach(function (element) {

    element.addEventListener("click", product_preview_color);

});


function product_preview_color(e){
    let image = this.getAttribute('data-product-image');
    e.stopImmediatePropagation();
    e.stopPropagation();
    if (e.isPropagationStopped()) {

        console.log('work');
    }
    console.log(e);

    act.product_preview_status = false;
    if(act.hasOwnProperty('product_size_attr')){

        act.product_color_id = this.getAttribute('data-color-id');
    }
    act.product_attr_id = this.getAttribute('data-id');
    condition.color.condition_value = act.product_color_id;
    act.product_preview.innerHTML = `<div class="product__media--preview__items">
    <a class="product__media--preview__items--link glightbox" data-gallery="product-media-preview" href="http://127.0.0.1:8000/storage/media/attr_image/${image}"><img class="product__media--preview__items--img" src="http://127.0.0.1:8000/storage/media/attr_image/${image}"></a>
    <div class="product__media--view__icon">
        <a class="product__media--view__icon--link glightbox" href="http://127.0.0.1:8000/storage/media/product/1686117526.png" data-gallery="product-media-preview">
            <svg class="product__items--action__btn--svg" xmlns="http://www.w3.org/2000/svg" width="22.51" height="22.443" viewBox="0 0 512 512"><path d="M221.09 64a157.09 157.09 0 10157.09 157.09A157.1 157.1 0 00221.09 64z" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32"></path><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32" d="M338.29 338.29L448 448"></path></svg>
            <span class="visually-hidden">product view</span>
        </a>
    </div>
</div>`;


}

The problem is when I am click any element on that class first trigger event for that element that trigger event for the first node of the nodelist Guide me how can i stop that.

It stop trigger more than one time.

Upvotes: 0

Views: 23

Answers (0)

Related Questions