addEventLisnerについて

すみません、緊急です、、。

JavaScriptでマウスオーバーした時に、コンテンツを表示し、
そのコンテンツからマウスが離れた時に、コンテンツがdisplay:none;に
なるものを作っています。
久しぶりに仕事で作ることになったのですが、うまく動作せず困っております。

どういう風に動作してしまうかというと、
#btn1 を押すと、１回目は問題なくコンテンツの表示、非表示がうまくいくが、２回目の表示がうまく行かない
という感じです。console.log(1)などで、処理されている順番を見ていると、どうやら、
２回目はbtn1のmouseenterの処理中に、btnblockWrapeprのmouseleaveの即時関数が実行されてしまっています。

もし以上の内容で不明な場合はご質問いただけると幸いです。
それではお忙しいところ恐縮ですが、ご教授いただければと思います。。。

ソースコードは下記となります。

javascript
1var btn1 = document.getElementById( 'btn1' );
2var btnBlock = document.getElementById( "btn1__block" );
3var btnblockWrapepr = document.getElementById( "btn__block-wrapper" );
4
5btn1.addEventListener( 'mouseenter', function(){
6			
7			if( !btnblockWrapepr.classList.contains( "boxDisplay" ) ){
8				
9				btnblockWrapepr.classList.remove( "boxNone-2" );
10				btnblockWrapepr.classList.remove( "boxNone" );
11				btnblockWrapepr.classList.add( "boxDisplay" );
12				console.log( "1" );
13				
14			}
15			
16		} );
17		
18		btnblockWrapepr.addEventListener( 'mouseleave', function(){
19			
20			if( this.classList.contains( "boxDisplay" ) ){
21				// ２番最初に行われる処理
22				(function(){
23					btnblockWrapepr.addEventListener( 'animationend', function(){
24						this.classList.remove( "boxNone-2" );
25						this.classList.add( "boxNone" );
26						console.log( "3" );
27					} );
28				})( rmBox() );
29				
30				// １番最初に行われる処理
31				function rmBox(){
32					btnblockWrapepr.classList.remove( "boxDisplay" );
33					btnblockWrapepr.classList.add( "boxNone-2" );
34					console.log( "2" );
35				}
36			}
37		} );

scss
1.boxDisplay{
2
3    display   : block;
4    animation : fade-in 500ms ease-in 0s 1 alternate forwards running;
5
6}
7.boxNone{
8
9    display   : none;
10    animation : fade-out 500ms ease-in 0s 1 alternate forwards running;
11
12}
13.boxNone-2{
14
15    animation : fade-out 500ms ease-in 0s 1 alternate forwards running;
16
17}
18@keyframes fade-in{
19
20    0%{
21        opacity : 0;
22    }
23    100%{
24        opacity : 1;
25    }
26}
27@keyframes fade-out{
28
29    0%{
30        opacity : 1;
31    }
32    100%{
33        opacity : 0;
34    }
35
36}

html
1<div class="boxDisplay boxNone" id="btn__block-wrapper">
2<div class="btn__block-inner">
3<a href="#">あ</a>
4<a href="#">い</a>
5<a href="#">う</a>
6<a href="#">え</a>
7</div>
8</div>
9

TakeoSaki

2017/08/08 01:58 編集

JSの1行目に登場する「btn1」が、HTMLのどこにも無いように見えます。もしかすると重なったり交差しているかもしれませんが、位置関係がみえません。あと、WrapperのスペルがWrapeprになっている箇所があります。

行動規範の内容に同意します

回答1件

ベストアンサー

addEventListener が入れ子になっているのは、意図してのことなのでしょうか。
mouseleave イベントが発火する度に、animationend ハンドラが追加されます。
従って、mouseleave イベントが3回発火すれば、animationend ハンドラは累計6回実行されることになります。

即時関数は不要ですし、全体的に何をしたいのか分からないコードですね…。

Re: raff さん

投稿2017/07/30 13:43