2017-12-02 29 views
0

これは私のコードです:addEventListenerを無効にするにはremoveEventListenerを使用する方法?

var element = document.createElement('div'); 
element.style.height = "100px" 
element.style.width = "100px"; 
element.style.backgroundColor = "red"; 
var body = document.getElementsByTagName('body')[0]; 
body.appendChild(element); 

function hov() { 
    element.style.backgroundColor = "blue"; 
} 
element.addEventListener('mouseover', hov); 
element.removeEventListener('mouseout', hov); 

あなたが見ることができるように、私は赤の背景色でのdiv要素を作成しました。 AddEventListenerは正常に動作し、背景色は青に変更されますが、なぜremoveEventListenerは機能しませんか?なぜdivはまだ青ですか?

あなたが戻って赤に色を返すように関数を作成する必要があります
+2

色を赤に戻す関数を作成する必要があります。 –

+3

'' mouseout''のイベントが登録されていないので、 'removeEventListener'はイベントを削除しません。それがうまくいくなら、それでもあなたの色は赤に変わりません。マウスアウト時に色を赤に設定する別の関数が必要になります。 btwあなたはそのdiv:hover {background:blue;}のためにCSSを使用することができます –

+0

まずはあなたはリスナーを削除していません(*あなたは*にバインドした同じイベントを使用する必要があります)。リスナーを削除しても、リスナー内部で何が起こったのかはわかりません。あなたは、mouseoutイベントのためにもう1つのハンドラを追加するだけで、最初のものが元に戻ったものを元に戻す必要があります。 –

答えて

0

function hovOut() { 
    element.style.backgroundColor = "red"; 
} 
element.addEventListener('mouseout', hovOut); 
1

あなたは手段は、DIVは文句を言わない、更なる「ホバー」のイベントに耳を傾けることを、イベントリスナーを削除しました。 したがって、(removeeventlistener以外の)他の機能を条件に基づいて変更する必要があります。

0

イベントについての事は、一度終了すると終了します。それに応じて行われたものを何が起こったのか

だった(あなたのケースを、それはHOV関数であった)ことをキャンセルしていないイベントのリスナーを削除する:放出さ 1.イベントが - >関数HOVは 2.削除されたリスナーは、その一部でした - >コードは、そのようなマウスアウトイベントが定義されていなかった

マウスアウトイベントを待って停止し

回避策:

function removeHov(){ 
    element.style.backgroundColor = "red"; 
} 
element.addEventListener('mouseout', removeHov); 
0

あなたは成功したイベントリスナーを削除し、さらにはあなたがやった場合はしませんでした、divの色も変更されています。その色を変更するのは、イベントを切り離すためだけです。代わりに、明示的に色を変更する必要があります。

関連する問題