Tengo dos divs, div1 y div2. Cuando se hace clic en div2, quiero cambiar el controlador "onmouseover" para div1. Aquí está el código de violín ( https://jsfiddle.net/au43obnz/2/ ):
<div id='div1' onmouseover='this.style.color=`purple`' onmouseout='this.style.color=`black`' onclick='this.onmouseover=null; this.onmouseout = null;'> hello </div> <br> <div id='div2' onclick="div1 = document.getElementById(`div1`); div1.style.color=`blue`; div1.onmouseover = 'this.style.color=`yellow`';"> world </div> El controlador onclick de div2 funciona cuando trato de cambiar otro elemento de div1 (por ejemplo div1.style.color='blue' ), y el controlador onclick de div1 cambia correctamente la función onmouseover por sí mismo (por ejemplo, onclick='this.onmouseover=null; this.onmouseout = null; ).
Pero el controlador div2 onclick no cambiará la función onmouseover para div1 . Intenté cambiar div1.onmouseover = "this.style.color='yellow'" a div1.onmouseover = "document.getElementById('div1').style.color='yellow'" , pero aún no lo hace trabajar.
¿Alguien sabe lo que está pasando aquí?
Se puede utilizar una variable de control para impulsar el programa. De esta forma, se comprueban las condiciones necesarias para la dirección del programa. En la solución a continuación, el antiguo evento mouseover del primer elemento <div> se activa a menos que se haga clic en el segundo <div> ; Después de hacer clic en el segundo <div> , se activa el nuevo evento mouseover del primer <div> .
const div1 = document.getElementById('div1'); const div2 = document.getElementById('div2'); let passive = false, newEventHandler = false; /* old mouse over event */ div1.addEventListener('mouseover', function() { if(!passive && !newEventHandler) { this.style.color = "purple"; console.log("old mouse over"); } }); /* new mouse over event */ div1.addEventListener('mouseover', function() { if(newEventHandler) { this.style.color = "yellow"; console.log("new mouse over"); } }); /* passive mouse out event */ div1.addEventListener('mouseout', function() { if(!passive) this.style.color = "black"; }); /* conditions */ div1.addEventListener('click', function() { passive = true; }); /* conditions */ div2.addEventListener('click', function() { div1.style.color = "blue"; newEventHandler = true; }); <div id='div1'>hello</div><br> <div id='div2'>world</div>