Disabling event when scroll

Question

I need to disable temporaly event mouseup when user scroll the div. I test bind scroll event on div and preventDefault and stopImmadiatePropagation on event but not work.

Prototype of code:

$(document).ready(function() {
  $(document).on("mouseup", "#test", function(e) {
      $("body").append('<b style="color:red">Mouse up | </b>');
  });
  $("#test").scroll(function(e) {
      $("body").append('<b style="color:green">Scroll | </b>');
      e.preventDefault();
      e.stopImmediatePropagation();
  });
});

I provide this plunker example: plunker

Please add code here and not just links. Read this carefully: http://stackoverflow.com/help/how-to-ask — caramba, Dec 10 '15 at 08:20
you can add `($document).off("mouseup", "#test")` inside the callback for scroll event if you just want to disable it — maioman, Dec 10 '15 at 08:23
Not work, and I think the `.off` disable completly my `mouseup` event, test in plunker! — Davide, Dec 10 '15 at 08:29

Alexander Abumov · Accepted Answer · 2015-12-10T08:55:56.333

2

Try to use .off()

JQuery API documentaion

Update:

The right solution: Plunker

edited Dec 10 '15 at 08:55

answered Dec 10 '15 at 08:26

Alexander Abumov

98
1
7

Not work, and I think the `.off` disable completly my `mouseup` event, test in plunker! – Davide Dec 10 '15 at 08:27
Perhaps this solution will help: http://plnkr.co/edit/IMscpJoT6btU3zTMkrbk?p=preview – Alexander Abumov Dec 10 '15 at 08:38
It's maybe a trick using timeout with delay? Is the only one solution? – Davide Dec 10 '15 at 08:42
Yes, I think, because we need only turn off the event immediately after the scroll. – Alexander Abumov Dec 10 '15 at 08:46

Rapid · Answer 2 · 2015-12-10T08:49:47.250

$(document).ready(function() {
  $(document).on("mouseup", "#test", function(e) {
      $("body").append('<b style="color:red">Mouse up | </b>');
  });
  var isScrolling = false;
  $("#test").scroll(function(e) {
      $("body").append('<b style="color:green">Scroll | </b>');
      e.preventDefault();
      e.stopImmediatePropagation();
      isScrolling = true;
      setTimeout(function(){
        isScrolling = false;
        setTimeout(function(){
          if(!isScrolling){
            $(document).off("mouseup", "#test");
            $(document).on("mouseup", "#test", function(e) {
              $("body").append('<b style="color:red">Mouse up | </b>');
            });
          }
        }, 500);
      }, 500);
      $(document).off("mouseup", "#test");
  });
});

It will disable the mouseup event when the scroll event is fired.

http://plnkr.co/edit/630M9zZpNxXGBABvPq8q?p=preview

Disabling event when scroll

2 Answers2