Como bloqueo un elemento dinamico con click (javascript)

[Radi30]

Buenas, lo que quiero hacer es que esta funcion:

Código Javascript:

$(function(){
    $("li a.mostrar-heroe").mouseover(function() {
        var heroe = $(this).data("heroe");
        $(".on").removeClass("on");
        $(this).parent().addClass("on");
        procesarHeroe(LH[heroe]);
    })
})
 

se ejecute normal, pero en cuanto le de un click a uno de esos "elementos de lista" de clase .mostrar-heroe, se pare y los posteriores elementos sobre los que pase no cambien las clases ni nada.

El caso es que la linea "procesarHeroe..." lleva a cabo una serie de cambios de datos en la pagina y quiero que se puedan ojear cuando pasas por encima con el raton pero que se queden estaticos cuando le de click a uno.

Otra duda que tengo es que como veris en el selector css la informacion data la recojo de un <a> porque asi me dijeron que es mas compatible, pero lo que no se es si estorbara a la hora de hacer click en el elemento claro...