CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Rahul
Rahul

Reputation: 995

cursor becomes not-allowed and browser stops reading mouse event?

In the following code, i made a simple slider with two slider button in it to read range and minimum value.

and I have set the minimum value of slider so that user cannot decrease the range beyond a minimum limit.

slider works somewhat correct! but when a user reaches the minimum range limit, and the user cannot decrease the range further but the user should be allowed to increase the range.

but after the minimum range is hit and when user tries to increase the range the cursor goes not-allowed like and browser stops reading any kind of mouse event at that time, and after that, every time user tries to increase the range this happens and the user no longer can increase the range.

And sometimes this happens without any reason?

play with it for some time to get the issue?

why does the cursor go not-allowed type when the user tries to increase the range after the minimum range is hit?

code: https://jsfiddle.net/nyfv1ahe/

$(document).ready(function() {
  var a = 0,
    b = 0,
    timeoutId;
  $("#button1").mousedown(function() {
    clearTimeout(timeoutId);
    $(".slider").mousemove(function(event) {
      a = event.clientX - 25;
      if (($(".slider").width() - a - b) >= 130) {
        $(".slider").css("padding-left", a);
      }
    });
  });
  $("#button1").mouseup(function() {
    $(".slider").unbind("mousemove");
  });
  $("#button1").mouseout(function() {
    timeoutId = setTimeout(function() {
      $(".slider").unbind("mousemove");
    }, 500);
  });
  $("#button2").mousedown(function() {
    clearTimeout(timeoutId);
    $(".slider").mousemove(function(event) {
      b = $(".slider").width() - event.clientX - 25;
      if (($(".slider").width() - a - b) >= 130) {
        $(".slider").css("padding-right", b);
      }
    });
  });
  $("#button2").mouseup(function() {
    $(".slider").unbind("mousemove");
  });
  $("#button2").mouseout(function() {
    timeoutId = setTimeout(function() {
      $(".slider").unbind("mousemove");
    }, 500);
  });
});
.slider {
  max-width: 700px;
  height: 50px;
  background-color: #a0a0a0;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.slider div {
  display: inline-block;
}

.button {
  width: 60px;
  height: 60px;
  border-radius: 30px;
  background-color: red;
  z-index: 100;
}

#button1 {
  left: 25px;
}

#button2 {
  right: 50px;
}

.button:hover {
  cursor: pointer;
}

.range {
  flex-grow: 2;
  height: 50px;
  background-color: blue;
  margin: 0 -30px;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<body>
  <div class="slider">
    <div class="button" id="button1"></div>
    <div class="range"></div>
    <div class="button" id="button2"></div>
  </div>
</body>

if you remove mouseout event from both the button then it works somewhat correct but the problem with this is that sometimes button stick to the user mouse even after the user has clicked out of the button!

Upvotes: 1

Views: 1127

Answers (2)

dcromley
dcromley

Reputation: 1410

ADLADS (A Day Late, A Dollar Short)
From JQUERY How to disable not-allowed cursor while dragging?,
(user 'Remembered to Post Solution'), add

event.preventDefault();

to your mousemove function.

Upvotes: 1

Harvey Cushing
Harvey Cushing

Reputation: 11

https://javascript.info/mouse-drag-and-drop

   ball.ondragstart = function() {
      return false;
   };

And then everything will be fine))

Upvotes: 1

Related Questions