JS-Functionで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、次のとおりです。だから、

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

、私は基本的機能（DIAS）が呼び出されるマウスオーバーを無効にしたい、とするときの機能を再有効化（revertcontent）が呼び出されます。 （revertcontentは、他のボタンを押すことで呼び出されるん。

のEventListenerとまったく機能していないようです。あなたの助けを事前に

ありがとう！私はコーダー、単なる趣味・イスト午前

Answer 1

一般に、mouseover属性を変更しようとすると悪い習慣です。より簡単な方法は、 "isMouseoverEnabled"のような変数を設定し、mouseoverハンドラで変数がfalseの場合はすぐに戻ります。また、あなたのコードがrevertContentを呼び出すたびに、マウスが重複するたびに重複するイベントリスナーがたくさん追加されています。

また、mouseover属性の代わりにjavascriptを使用してイベントをバインドすると、あとでバインド解除するのは簡単です。例えば、あなたのコードは次のようになります。それはすべてのブラウザで物事を標準化しているため

追記として

$(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のは本当にこのようなもののためのより良いです。これにより、コード作成に費やす時間を短縮し、マウスイベントの微妙な違いを把握するのにかかる時間を短縮できます。

Answer 2

なぜそれがより容易になりますどのjQueryを使用していない。この

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

のようなあなたのhtml外観は次に、この

よう jQuery hover()機能を使用してください

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

Answer 3

コメントするのに十分なスペースがありません。

次のように私は、コードを変更：今、私はdiv要素のうち、私のマウスを取った後vita.jpgで立ち往生

\t function showvita(){ 
 
\t document.getElementById('content').src='img/vita.jpg'; 
 
\t document.getElementById('zentrum').onmouseout = "revertcontent()"; 
 
\t } 
 

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

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

。機能diasが呼び出された後、再びコンテンツを復帰させた後、私はcontent.jpgとマウスオーバー機能がなくなりました。では、ここで何が起こっていますか？ .onmouseover="showvita()";はその関数を呼び出すか、mouseoverオプションのdivにその値を設定しますか？私は本当にその値のリセットが必要だと思います。