3

スクロール時にクリックイベントをトリガーしようとしています。上にスクロールするときの左のナビゲーションと下にスクロールするときの右のナビゲーションのように、それを達成しようとしています

$('#elem').bind('mousewheel', function(e){
     if(e.delta < 0) {
         //scroll left
         $(".left-nav").trigger("click");
     }else {
         //scroll right
         $(".left-nav").trigger("click");
     }
     return false;
 });

ただし、クリック イベントは複数回トリガーされます。スクロール速度に関係なく、クリックイベントを1回だけトリガーするのを手伝ってください。

前もって感謝します

4

2 に答える 2

0

これを試して：

var busy = false;
$('#elem').bind('mousewheel', function(e){
    if (!busy) {
        busy = true;
        if(e.delta < 0) {
           //scroll left
           $(".left-nav").trigger("click");
        } else {
           //scroll right
           $(".left-nav").trigger("click");
        }
    }
 return false;
 });

次に、クリック機能が終了したら、「ビジー」を「false」に設定します

于 2012-08-16T18:47:47.987 に答える
0

これは、スクロール イベントが継続的に発生するためです。したがって、マウス ホイールを回してから停止しても、それは 1 つのイベントに相当しません。マウスホイール ハンドラーに a を追加してみてくださいconsole.log("mouse scrolled")。私の言いたいことがすぐにわかります。

試みていることを達成するには、何らかの方法で妥協する必要があります。ハンドラーで使用し、タイムアウト期間後に (コールバックで)イベントsetTimeoutをトリガーすることをお勧めします。最初のスクロール イベントが期限切れになる前に 2 番目のスクロール イベントが発生した場合は、最初のスクロール イベントをキャンセルしてから再開します。これは、ユーザーがスクロールしてからスクロールを停止するのと同じです...そしてトリガーします。clicksetTimeoutclick

- 編集 -

これは反対のアプローチです - キャプチャした最初のマウスホイールイベントでクリックをトリガーし、ユーザーが少なくともnミリ秒、たとえば 500 ミリ秒間スクロールを停止するまで残りを無視します。

var scrolled = false,
    scrollTimeout;

$('#elem').bind('mousewheel', function(e){
    // absorb scroll
    e.preventDefault();

    // Scrolled yet?
    if(!scrolled){
        // Note they've scrolled
        scrolled = true;
        // Click appropriate nav
        $(e.delta < 0 ? '.left-nav' : '.right-nav').trigger("click");
    }

    // Reset the timer
    clearTimeout(scrollTimeout);

    // If the user stops scrolling for 500 millis, they can trigger click w/ next scroll
    scrollTimeout = setTimeout(function(){
        scrolled = false;
    }, 500);
}

乾杯

于 2012-08-16T18:43:44.423 に答える