Remove mouseover in div with JS-Function

Question

I want to be able to enable and disable the mouseover function call of a certain div-id and it just won't work.

function revertcontent(){
  document.getElementById('content').src='img/content.jpg';
  document.getElementById('zentrum').addEventlistener("mouseover",true);
}
function dias( klick ){
  document.getElementById('content').src='img/'+klick+'.jpg';
  document.getElementById('zentrum').removeEventlistener("mouseover",true);
}

here is the div, that has the mouseover function call:

<div class="cont">
    <div id="zentrum" onmouseover="showvita()" onmouseout="revertcontent()">
         <img src="img/content.jpg" id="content" />
    </div>
</div>

So, I basically want to disable the mouseover when the function (dias) is called, and reenable it when the function (revertcontent) is called. (revertcontent does get called by other button presses as well.

It doesn't seem to work at all with the EventListeners.

Thanks in advance for your help! I am no coder, just a hobby-ist

Answer 1

Why not use jQuery which makes it more easier. Make your html look like this

<div class="cont"><div id="zentrum">
    <img src="img/content.jpg" id="content" />
</div></div>

Then use the jQuery hover() function like this

$('div#zentrum').hover(function(){
      $('img#content').attr('src', 'img/content.jpg');
},
function(){
    // run all your code for the mouseleave here
});

Answer 2

there just isn't enough space to comment easily.

I changed the code as follows:

  function showvita(){ document.getElementById('content').src='img/vita.jpg'; document.getElementById('zentrum').onmouseout = "revertcontent()"; } function revertcontent(){ document.getElementById('content').src='img/content.jpg'; document.getElementById('zentrum').onmouseover = "showvita()"; } function dias( klick ){ document.getElementById('content').src='img/'+klick+'.jpg'; document.getElementById('zentrum').onmouseover = 'null'; document.getElementById('zentrum').onmouseout = 'null'; } 

 <div class="cont" > <div id="zentrum" onmouseover="showvita()" onmouseout="revertcontent()"> <img src="img/content.jpg" id="content" /> </div> </div> 

Now I get stuck with the vita.jpg after taking my mouse out of the div. And after the function dias has been called and thereafter again revertcontent, I am stuck with content.jpg and no more mouseover functionality. So what is happening here? Does .onmouseover="showvita()"; call that function, or set that value in the div for the mouseover option? I really just need that value reset, I think.

Answer 3

Generally, it's bad practice to try to change a mouseover attribute. An easier way would be to set a variable, like "isMouseoverEnabled", and then in your mouseover handler, if the variable is false, you return immediately. Also, I see that your code is calling revertContent every time the mouse goes over it, which is adding tons of duplicate event listeners.

Alternatively, if you bind your events using javascript instead of a mouseover attribute, it's trivial to unbind them later. For example, your code might look like this:

$(document).ready(function() {
    var onMouseOver = function(){
        // Do stuff here
    };

    var revertcontent = function() {
        $('#content')[0].src ='img/content.jpg';

        // We're calling "off" just in case "dias" hasn't been called,
        //    to avoid double event binding
        $('#zentrum').off('mouseover', onMouseOver )
                     .on('mouseover', onMouseOver );
    };
    var dias = function(klick) {
        $('#content')[0].src ='img/content.jpg';
        $('#zentrum').off('mouseover', onMouseOver );
    };

    revertcontent();
});

As a sidenote, jquery really is better for stuff like this because it standardizes things across all browsers. It allows you to spend more time writing code and less time trying to figure out the subtle differences in mouse events.