Asi que. para empezar, estoy escribiendo mis eventlisteners de esta manera.
document.addEventListener('click',(e)=>{ const element = e.target; if(element.classList.contains('classOne'){ fire_function_one(); } if(element.classList.contains('classTwo'){ fire_function_two(); } });Tengo un div como sigue
<div class='classOne classTwo'>Something</div>Entonces, lo que quiero lograr es que, cuando nuestro div tenga classOne, quiero activar 'fire_function_one()'. Sin embargo, cuando nuestro div tiene tanto classOne como ClassTwo, quiero activar 'fire_function_two()' pero no quiero ejecutar ' fire_function_one()'.
lo que he probado,
if(element.classList.contains('classTwo' && !element.classList.contains('classOne'){ fire_function_two(); //Doesnt acheive what I want }Cambie el Orden de su condición y use la declaración else if.
document.addEventListener('click',(e)=>{ const element = e.target; if(element.classList.contains('classTwo'){ fire_function_two(); } else if(element.classList.contains('classOne'){ fire_function_one(); } });Si está seguro de que el elemento puede tener classOne o tanto classTwo como classOne , puede cambiar el orden y usar la instrucción else if :
document.addEventListener('click',(e)=>{ const element = e.target; if(element.classList.contains('classTwo'){ fire_function_two(); } else if(element.classList.contains('classOne'){ fire_function_one(); } });Debe escribir clic en el elemento como se muestra a continuación.
var eleOne = document.getElementsByClassName('classOne') if(eleOne.length > 0) { var currentEleOne = eleOne[0]; currentEleOne.onclick = function () { // Click code for classOne } } var eleTwo = document.getElementsByClassName('classTwo') if(eleTwo.length > 0) { var currentEleTwo = eleTwo[0]; currentEleTwo.onclick = function () { // Click code for classTwo } }