jqueryのmouseenterイベントの、イベントの重複について。

スライドショーへのサムネイルをホバーするとスライドされるものを、jqueryで作っています。
mouseenterで、gotoイベントを発生させ、動かしているのですが、
メニューが近くにあるので、連続されていて、マウスが離れることなく、重複して実行されてしまい、
マウスを一度離してやらないと実行されないことがあります。
調べたところ、

$(this).stop()
e.preventDefault();
eachイベントにする

等と出てきましたので、やってみましたが、効果がありません。
要素同士を個別に実行させるには、どうすればいいのでしょうか？

$("#listslide a").each(function(){
$(this).mouseenter(function(e) {
e.preventDefault();
_this.stop(true);
return $(this).stop(),_this.goto(($(e.currentTarget).attr("js-item") * 1) + 1);
}).mouseleave(function(){
return $(this).stop();
return _this.stop(true);
});


});
/*

No.2 回答者： fujillin 回答日時： 2015/09/09 14:54

ANo1です。

＞次のイベントが発生し、次のスライドショーでの動きが始まってしまいます。
jQueryでアニメーションを行っているのだと想像しますが、普通に処理していれば、jQueryの場合は内部でアニメーションを制御していて、次のアニメーションの要求が来ても、一旦キューに溜めて順次処理しているはずと思います。
それなので、「時間が遅れて処理される」ことはあっても、ご説明なさっているようなことは起こりにくくなっているはずなのですが。
（通常のjavascriptで記述すると、うっかりするとそのようなことも起こり得ます）

上記の時間の遅れをなくしたいなどのために、stopメソッドが用意されており、実行中のアニメーションを停止（あるいは終了状態にjump)することができるようになっていたように思います。
同様に、処理のキュー自体も操作できるようになっていたかと・・・（曖昧な記憶ですが）


＞たしか、_thisはスライドショーの要素が入っていると思います
多分違うのではないかと想像します。
仮に、DOM要素（または要素のjQueryオブジェクト）だとすると、jQueryオブジェクトであればstopメソッドは備えられていますが、ご提示のスクリプトにあるgotoメソッドは素のjQueryには存在しないはずです。
オブジェクトに拡張定義などをしているのでしょうか？
想像ですが、根本的な原因はご提示のコード以外のスクリプトにあるのではないかと思います。


＞他のイベントが始まるとホバーからはストップできないのでしょうか。。。。
イベントの伝搬は制御可能ですが、発生済みのイベントを取り消すことはできません。
ただし、行っているイベント処理を中断することは不可能ではありませんが、そのようにスクリプトが作成されていなければ無理です。
上にも書きましたように、jQueryのアニメーションは中断することが可能なメソッドとして作られていますので、stopメソッドなどで中断することができるのです。


※失礼ながら、質問者様の「イベント」という語句の概念が、一般的なものと少々異なるように感じます。
　一般的な言葉の意味を再確認なさっておく方がよろしいかもしれません。

No.1 回答者： fujillin 回答日時： 2015/09/07 15:15

回答がないようなので・・・

ご提示の情報だけではさっぱりなので、多分、他の回答者さんたちもコメントしようがないのではないかと想像します。
以下も、多分に推測ばかりですが・・・


＞メニューが近くにあるので、連続されていて、マウスが離れることなく、
＞重複して実行されてしまい、
＞マウスを一度離してやらないと実行されないことがあります。
事象が把握できません。
他の処理が同時に起きて重複しているということなのか、それとも同じ処理が繰り返して行われるという意味なのか。
「メニューが近くにあるので」とおっしゃっていますが、近いか遠いかは（多分）関係ないはずと思います。
それよりは、要素の包含関係とイベントの設定の仕方が適切でないのではないかと想像します。
どのように適切でないのかは、残念ながら、ご提示の情報からだけではわかりかねます。

＞スライドショーへのサムネイル
とのことなので、サムネイル（画像は）
<ul>
<li><a><img></a></li>
　～～
のような構造か

<div>
<a><img></a>
　～～
のような構造だと推測しますが、ご質問文に記されている機能だけを実現するのであれば、わざわざmouseenterで取得したりeachで処理する必要もなさそうに思われます。
単に
　$(サムネイル内のimg).hover( func1, func2 );
といった書式でも、十分に実現可能であると想像します。
一方で、スライドショーがどのようなものなのかわかりませんが、単なるスライドショーならmouseleaveやmoseoutでは何もしなくても良いので、over時（あるいはenter時)の処理を記すだけでも充分なはずと思います。
over時にサムネイル自体を半透明→不透明などと変えていて、outで元に戻しているといったようなことをなさっているなら別ですが、それらしい処理も見当たらないようですし。

それよりも、関係する要素に他のイベントが重複して設定されていないか（意図的に設定しているならＯＫです）が、ご質問の事象の原因になっているのではないかと推測します。
(ご質問の事象自体がよくわからないのと、ご提示のスクリプトで_thisがどのようなオブジェクトなのかも不明なので、上記はまったくの推測ですが・・・）


蛇足ですが、ご提示のスクリプトで
stop()やpreventDefault()の使い方にも疑問がありますので、もう一度、意味を再確認なさった方がよろしいように思います。
また、スライドショーは検索すれば多くのサンプルが見つかることと思いますので、そのあたりも参考になるのではないでしょうか。

この回答へのお礼

ご回答有難うございます。

情報の提示が、適切ではなかったようで、見てくださった皆様に、混乱させていていたら、すいませんでした。

まず、スライドショーをする大きなバナーが左あり、そのサムネイルが並んで右側にあります。サムネイルをホバーするとイベントが起き、　スライドショーが動くという仕組みです。

サムネイルは並んでいるため、
ホバーで、「サムネイルを触れると、スライドショーが動いて、該当の画像を表示する」　までに、次のイベントが発生し、次のスライドショーでの動きが始まってしまいます。

stop()や、preventDefaultを、入れ込みましたが、問題は解決しません。
stopイベントや、prebentDefaultのイベントを削っても解決しません。

イベントの伝播というより、違うイベントを起こしているからでしょうか。

とりあえず、ホバーでのイベントの時間を短くして、解決はしましたが、親要素に対して行っているイベントでもなく、スライドショーという他のイベントが始まると、
ホバーからはストップできないのでしょうか。。。。

たしか、_thisはスライドショーの要素が入っていると思います。
サムネイルをホバーで動くスライドショーのプラグインは見かけなかったのですが、もしあれば方法がわかり、解決しそうです。探してみます。

お礼日時：2015/09/09 13:17