jQuery，取消绑定mousewheel事件，然后在操作完成后重新绑定它吗? [英] Jquery, unbinding mousewheel event, then rebinding it after actions are completed?

问题描述

我已经为此苦苦挣扎了一段时间..我正在使用此代码来监视鼠标滚轮，以便可以使用我拥有的滑块来滚动鼠标滚轮.但是，在操作时存在问题排队，因此，如果您快速用鼠标滚轮滚动(就像任何人都会做的那样)，它们就会堆积起来，并且会引起儿童车行为..我知道如何用动画来处理这类问题，而不是用鼠标滚轮显示器来解决..

I've been struggling with this for a little while now.. I am using this code to monitor the mousewheel so it can be used for scrolling with a slider that I have.. however, it has an issue where the actions queue up so if you scroll with the mousewheel fast (like anyone would do normally) they build up and it causes buggy behavior.. I know about handling this sort of issue with animation, but not with a mousewheel monitor..

我想做一些类似的操作，例如在操作开始时解除鼠标滚轮的绑定(在这种情况下，是在移动鼠标滚轮后滚动滚动条)，然后在此之后重新绑定鼠标滚轮，因此，如果用户执行太多的滚动速度太快，它将忽略直到完成初始滚动..我尝试了下面的代码，但没有重新绑定，所以我不确定自己在做什么错，任何建议都可以.

I want to do something like unbind the mousewheel at the start of the action (in this case, to scroll the scrollbar after mousewheel is moved) then rebind it after this, so if user does too many scrolls too fast it just ignores until the initial scroll is completed.. I tried the code below but its not rebinding so I'm not sure what I am doing wrong, any advice is appreciated.

        $("#wavetextcontainer").bind("mousewheel", function(event, delta) {

   //HERE IS WHERE EVENT IS UNBOUND:
     $("#wavetextcontainer").unbind("mousewheel");

        var speed = 10;
        var mySlider = $("#slider");
        var sliderVal = mySlider.slider("option", "value");

        sliderVal += (delta*speed);

        if (sliderVal > mySlider.slider("option", "max")) sliderVal = mySlider.slider("option", "max");
        else if (sliderVal < mySlider.slider("option", "min")) sliderVal = mySlider.slider("option", "min");

        $("#slider").slider("value", sliderVal);

        event.preventDefault();

      // HERE I WANT TO REBIND THE EVENT:
     $("#wavetextcontainer").bind("mousewheel");

});

推荐答案

您需要存储可以引用的函数，如下所示:

You need to store the function were you can reference it, like this:

function myHandler(event, delta) {
     $("#wavetextcontainer").unbind("mousewheel", myHandler);

        var speed = 10;
        var mySlider = $("#slider");
        var sliderVal = mySlider.slider("option", "value");

        sliderVal += (delta*speed);

        if (sliderVal > mySlider.slider("option", "max")) sliderVal = mySlider.slider("option", "max");
        else if (sliderVal < mySlider.slider("option", "min")) sliderVal = mySlider.slider("option", "min");

        $("#slider").slider("value", sliderVal);

        event.preventDefault();

      // HERE I WANT TO REBIND THE EVENT:
     $("#wavetextcontainer").bind("mousewheel", myHandler);    
};

$("#wavetextcontainer").bind("mousewheel", myHandler);

这样做，您可以稍后调用 .bind() 到同一函数(您不能引用匿名者).您当前正在尝试调用 .bind() 没有的函数来处理任何东西，这是行不通的.这还有一个额外的优点，就是可以将相同的函数引用传递给 .unbind() ，以便取消绑定仅该处理程序，而不是任何 mousewheel处理程序.

By doing this you can call .bind() later to the same function (you can't reference an anonymous one). You're currently trying to call .bind() without a function to handle anything, which doesn't work. This also has the added advantage of being able to pass that same function reference to .unbind() so it unbinds only that handler, not any mousewheel handler.

或者，执行此操作 而不进行重新绑定，如下所示:

Alternatively, do this without un/re-binding, like this:

$("#wavetextcontainer").bind("mousewheel", function (event, delta) {
  event.preventDefault();
  if($.data(this, 'processing')) return; //we're processing, ignore event

  $.data(this, 'processing', true);
  var speed = 10;
  var mySlider = $("#slider");
  var sliderVal = mySlider.slider("option", "value");

  sliderVal += (delta*speed);

  if (sliderVal > mySlider.slider("option", "max")) sliderVal = mySlider.slider("option", "max");
  else if (sliderVal < mySlider.slider("option", "min")) sliderVal = mySlider.slider("option", "min");

  $("#slider").slider("value", sliderVal);
  $.data(this, 'processing', false);
});

这仅使用 $.data() 来存储我们正在工作"的数据条目如果该元素为true，则如果该元素为true，它将返回并忽略该事件.

This just uses $.data() to store a "we're working" data entry with the element, if anything hits this handler while it's true, it just returns and ignores the event.

这篇关于jQuery，取消绑定mousewheel事件，然后在操作完成后重新绑定它吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！