使用JS函数在div中删除mouseover

Question

我希望能够启用和禁用某个div-id的mouseover函数调用，但这将无法正常工作。

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);
}

这是div，具有mouseover函数调用：

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

因此，我基本上想在调用函数（dias）时禁用鼠标悬停，并在调用函数（revertcontent）时重新启用鼠标悬停。 （revertcontent确实也会被其他按钮按下来调用。

它与EventListeners似乎根本不起作用。

在此先感谢您的帮助！ 我不是编码员，而是业余爱好者

Answer 1

为什么不使用jQuery ，它使它变得更容易。 使您的html看起来像这样

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

然后像这样使用jQuery hover()函数

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

Answer 2

只是没有足够的空间来轻松评论。

我将代码更改如下：

  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> 

现在，将鼠标移出div后，我陷入了vita.jpg的困境。 在函数dias被调用并随后再次还原内容之后，我陷入了content.jpg的困境，而没有更多的鼠标悬停功能。 那么这里发生了什么？ 是否.onmouseover="showvita()"; 调用该函数，还是在div中为mouseover选项设置该值？ 我认为我真的只需要重置值即可。

Answer 3

通常，尝试更改鼠标悬停属性是一种不好的做法。 一种更简单的方法是设置一个变量，例如“ isMouseoverEnabled”，然后在鼠标悬停处理程序中，如果该变量为false，则立即返回。 另外，我看到您的代码每次在鼠标revertContent过它时都会调用revertContent ，这会添加大量重复的事件侦听器。

另外，如果您使用JavaScript而不是mouseover属性来绑定事件，那么稍后取消绑定是很简单的。 例如，您的代码可能如下所示：

$(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();
});

附带一提，jquery确实更适合诸如此类的东西，因为它可以在所有浏览器中实现标准化。 它使您可以花费更多的时间编写代码，而花费更少的时间来找出鼠标事件中的细微差别。