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

为什么不使用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

通常，尝试更改鼠标悬停属性是不好的做法。更简单的方法是设置变量，例如＆＃34; isMouseoverEnabled＆＃34;，然后在鼠标悬停处理程序中，如果变量为false，则立即返回。此外，我看到你的代码每次鼠标移动时都会调用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对于这样的东西真的更好，因为它标准化了所有浏览器的东西。它允许您花更多的时间编写代码，花更少的时间来弄清楚鼠标事件中的细微差别。

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

3 个答案: