AnswerBun.com

"mouseover" sobre td, dispara evento en tr en Javascript

Stack Overflow en español Asked by Luis Rodriguez on December 3, 2020

En mi proyecto tengo unas tablas, a las cuales les asigne un event de "mouseover" a sus tr, dentro de la funcion de este evento un efecto de sonido se reproduce cada una de las veces que hago un "mouseover" sobre las tr, pero cada vez que hago un mouseover sobre las td, tambien se dispara ese evento lo cual puede ser molesto para el usuario, he intentado agregando e.stopPropagation y e.preventDefault a mis td, pero no he conseguido nada con exito.

if (document.querySelectorAll('tr') !== 'undefined' && document.querySelectorAll('tr') !== 'null'){
    var rows = document.querySelectorAll('tr')
}
if (document.querySelectorAll('td') !== 'undefined' && document.querySelectorAll('td') !== 'null'){
    var td = document.querySelectorAll('td')
}

//Table Rows
if (rows){
    for(let i = 0; i<rows.length; i++){
        let childNodes = rows[i].childNodes
        if (rows[i].id === ''){
            rows[i].addEventListener('mouseover', function(){
                rows[i].style.backgroundColor = 'cyan'
                rows[i].classList.add('tr-hover')
                sound.play()
                for (let c = 0; c<childNodes.length; c++){
                    if (childNodes[c].nodeName != '#text'){
                        childNodes[c].style.color = '#12212b'
                        if (childNodes[c].children){
                            var children = childNodes[c].children
                            for (var cc = 0; cc<children.length; cc++){
                                children[cc].style.color = '#12212b'
                                children[cc].style.transition = '0.5s'
                                }
                            }
                        }
                    }
                })

        rows[i].addEventListener('mouseout', function(){
            rows[i].style.backgroundColor = ''
            rows[i].classList.remove('tr-hover')
            for (let c = 0; c<childNodes.length; c++){
                if (childNodes[c].nodeName != '#text'){
                    childNodes[c].style.color = 'cyan'
                    if (childNodes[c].children){
                            var children = childNodes[c].children
                            for (var cc = 0; cc<children.length; cc++){
                                children[cc].style.color = 'cyan'
                                }
                            }
                        }
                    }   
                })
        }
    }
}

//TD
if (td){
    for (let i = 0; i<td.length; i++){
        td[i].addEventListener('mouseover', function(e){
            e.stopPropagation()
        })
    }
}

Add your own answers!

Related Questions

Como iterar un entero en python?

1  Asked on September 20, 2020 by kilex

   

419 Page Expired, laravel JS

1  Asked on September 14, 2020 by yeisson-pinilla

     

¿Cómo crear un método para modificar la contraseña en node.js?

1  Asked on September 12, 2020 by osleynin-mambell-ramos

   

Actualizar datos en SSIS

1  Asked on September 11, 2020 by guillermo-ricardo-spindola-bri

     

Falta enviar datos del input a phpmyadmin (PHP)

0  Asked on September 11, 2020 by hatori-hanso

   

¿Cómo valido si una cadena es vacía en Python?

1  Asked on September 10, 2020 by fedorqui-so-deja-de-daar

   

Envío SMS no se envía pero informa éxito en la operación

2  Asked on September 8, 2020 by briast

     

Configuracion del web.Config

1  Asked on September 5, 2020 by afar1793

         

Iniciar un fragment al pulsar una notificación

0  Asked on September 3, 2020 by lukaman

 

Eventos del ratón con Python

0  Asked on September 3, 2020 by hector-lacunza

 

Problemas con el dismiss();

1  Asked on September 2, 2020 by tony-ormaza

 

No me funciona el @media

1  Asked on August 29, 2020 by francisco

       

Array Angular – IONIC

1  Asked on August 25, 2020 by isg-lokimil

   

Ask a Question

Get help from others!

© 2022 AnswerBun.com. All rights reserved. Sites we Love: PCI Database, MenuIva, UKBizDB, Menu Kuliner, Sharing RPP, SolveDir