javascript - 使用 JS-Function 删除 div 中的鼠标悬停

Question

我希望能够启用和禁用某个 div-id 的鼠标悬停函数调用，但它不起作用。

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，有鼠标悬停函数调用:

<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

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

或者，如果您使用 javascript 而不是 mouseover 属性来绑定(bind)您的事件，则稍后取消绑定(bind)它们是微不足道的。例如，您的代码可能如下所示:

$(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 确实更适合这样的东西，因为它标准化了所有浏览器的东西。它使您可以花更多的时间编写代码，而花更少的时间尝试找出鼠标事件中的细微差别。