javascript - 按钮 mousedown 不会在断点处停止

标签 javascript jquery

我正在尝试创建一个简单的微调器插件，但我遇到了一个问题。

重现问题:

  1. 点击并按住“加号”或“减号”按钮。
  2. 达到 max 或 min 后，该按钮将被禁用，您将收到一条消息，告知您已达到最大值或最小值。
  3. 现在只需在另一侧单击一次，即可将微调器增加或减少一步。
  4. 现在再次点击并按住第一个按钮。
  5. 微调器将通过 max 或 min 一步，然后停止。

出了什么问题？

enter image description here 

(function($) {
  $.fn.spiner = function() {
    $(this).each(function() {
      var errors = {
        min: "Looks like you are at Min ",
        max: "looks like you are at Max"
      };
      var temp = 0.0;
      var toUp = null;
      var ivUp = null;
      var toDown = null;
      var ivDown = null;
      var inc = $(this).find('.btn-add');
      var out = $(this).find('.btn-nums');
      var dec = $(this).find('.btn-less');
      var min = $(this).data('min');
      var max = $(this).data('max');
      var step = $(this).data('step');
      var type = $(this).data('type');
      var maxerr = $(this).data('maxerror');
      var minerr = $(this).data('minerror');

      function MaxStop() {
        if (temp >= max) {
          clearTimeout(toUp);
          clearInterval(ivUp);
          $('.btn-add').prop('disabled', true);
          $('.btn-less').prop('disabled', true);
          dec.prop('disabled', false);
          $('.result').html('<div class="alert alert-info animated fadeInUp" role="alert">' + errors.max + '</div>');
        }
      }

      function MinStop() {
        if (temp <= min) {
          clearTimeout(toDown);
          clearInterval(ivDown);
          $('.btn-add').prop('disabled', true);
          $('.btn-less').prop('disabled', true);
          inc.prop('disabled', false);
          $('.result').html('<div class="alert alert-secondary" role="alert">' + errors.min + '</div>');
        }
      }

      function MoreUp() {
        temp = temp + step;

        if (temp > 0) {
          out.html("+" + parseFloat(Math.round(temp * 100) / 100).toFixed(2));
        } else {
          out.html(parseFloat(Math.round(temp * 100) / 100).toFixed(2));
        }

        MaxStop();
      }

      function MoreDown() {
        temp = temp - step;
        if (temp > 0) {
          out.html("+" + parseFloat(Math.round(temp * 100) / 100).toFixed(2));
        } else {
          out.html(parseFloat(Math.round(temp * 100) / 100).toFixed(2));
        }


        MinStop();
      }
      inc.on("mousedown", function() {
          $(".btn-less").prop('disabled', false);
          $(".btn-add").prop('disabled', false);
          $('.result').children().addClass('fadeOutDown');
          temp = temp + step;

          if (temp > 0) {
            out.html("+" + parseFloat(Math.round(temp * 100) / 100).toFixed(2));
          } else {
            out.html(parseFloat(Math.round(temp * 100) / 100).toFixed(2));
          }


          toUp = setTimeout(function() {
            ivUp = setInterval(MoreUp, 75);
          }, 500);

        })
        .on("mouseup mouseleave", function() {
          clearTimeout(toUp);
          clearInterval(ivUp);
          MaxStop();
        });


      dec.on("mousedown", function() {
          $(".btn-less").prop('disabled', false);
          $(".btn-add").prop('disabled', false);
          $('.result').children().addClass('fadeOutDown');
          temp = temp - step;

          if (temp > 0) {
            out.html("+" + parseFloat(Math.round(temp * 100) / 100).toFixed(2));
          } else {
            out.html(parseFloat(Math.round(temp * 100) / 100).toFixed(2));
          }
          toDown = setTimeout(function() {
            ivDown = setInterval(MoreDown, 75);
          }, 500);
        })
        .on("mouseup mouseleave", function() {
          clearTimeout(toDown);
          clearInterval(ivDown);
          MinStop();
        });
    });
  }
}(jQuery));

$('.spiner').spiner();
body {
  padding-top: 10px;
}

.btn-prescriptis .btn {
  border-radius: 0px;
  max-height: 46px;
  cursor: pointer;
  width: 50px;
}

.btn-prescriptis .btn-nums {
  background: #fff !important;
  color: #555 !important;
  outline: none !important;
  box-shadow: none !important;
  width: 80px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="btn-group btn-prescriptis spiner" data-min="-6" data-max="3" data-step="0.25" data-maxerror="max" data-minerror="min">
  <button type="button" class="btn btn-secondary btn-less">-</button>
  <button type="button" class="btn btn-secondary btn-nums">0.00</button>
  <button type="button" class="btn btn-secondary btn-add">+</button>
</div>

<div class="container">
  <div class="col-12 result"></div>
</div>

最佳答案

我认为发生这种情况是因为检查是否超出了最大值或最小值并没有在您认为的所有时间发生。为了防止这种情况，我会在你的 MoreUp() 中添加条件检查。和 MoreDown()功能，以便每次单击相应的按钮时，您都可以确保您没有超出或低于限制。

换句话说，if (temp < max) {和 if (temp > min) { ，如下面的代码片段所示。

(function($) {
  $.fn.spiner = function() {
    $(this).each(function() {
      var errors = {
        min: "Looks like you are at Min ",
        max: "looks like you are at Max"
      };
      var temp = 0.0;
      var toUp = null;
      var ivUp = null;
      var toDown = null;
      var ivDown = null;
      var inc = $(this).find('.btn-add');
      var out = $(this).find('.btn-nums');
      var dec = $(this).find('.btn-less');
      var min = $(this).data('min');
      var max = $(this).data('max');
      var step = $(this).data('step');
      var type = $(this).data('type');
      var maxerr = $(this).data('maxerror');
      var minerr = $(this).data('minerror');

      function MaxStop() {
        if (temp >= max) {
          clearTimeout(toUp);
          clearInterval(ivUp);
          $('.btn-add').prop('disabled', true);
          $('.btn-less').prop('disabled', true);
          dec.prop('disabled', false);
          $('.result').html('<div class="alert alert-info animated fadeInUp" role="alert">' + errors.max + '</div>');
        }
      }

      function MinStop() {
        if (temp <= min) {
          clearTimeout(toDown);
          clearInterval(ivDown);
          $('.btn-add').prop('disabled', true);
          $('.btn-less').prop('disabled', true);
          inc.prop('disabled', false);
          $('.result').html('<div class="alert alert-secondary" role="alert">' + errors.min + '</div>');
        }
      }

      function MoreUp() {
        if (temp < max) {
          temp = temp + step;

          if (temp > 0) {
            out.html("+" + parseFloat(Math.round(temp * 100) / 100).toFixed(2));
          } else {
            out.html(parseFloat(Math.round(temp * 100) / 100).toFixed(2));
          }

          MaxStop();
        }
      }

      function MoreDown() {
        if (temp > min) {
          temp = temp - step;
          if (temp > 0) {
            out.html("+" + parseFloat(Math.round(temp * 100) / 100).toFixed(2));
          } else {
            out.html(parseFloat(Math.round(temp * 100) / 100).toFixed(2));
          }


          MinStop();
        }
      }
      inc.on("mousedown", function() {
          $(".btn-less").prop('disabled', false);
          $(".btn-add").prop('disabled', false);
          $('.result').children().addClass('fadeOutDown');
          temp = temp + step;

          if (temp > 0) {
            out.html("+" + parseFloat(Math.round(temp * 100) / 100).toFixed(2));
          } else {
            out.html(parseFloat(Math.round(temp * 100) / 100).toFixed(2));
          }


          toUp = setTimeout(function() {
            ivUp = setInterval(MoreUp, 75);
          }, 500);

        })
        .on("mouseup mouseleave", function() {
          clearTimeout(toUp);
          clearInterval(ivUp);
          MaxStop();
        });


      dec.on("mousedown", function() {
          $(".btn-less").prop('disabled', false);
          $(".btn-add").prop('disabled', false);
          $('.result').children().addClass('fadeOutDown');
          temp = temp - step;

          if (temp > 0) {
            out.html("+" + parseFloat(Math.round(temp * 100) / 100).toFixed(2));
          } else {
            out.html(parseFloat(Math.round(temp * 100) / 100).toFixed(2));
          }
          toDown = setTimeout(function() {
            ivDown = setInterval(MoreDown, 75);
          }, 500);
        })
        .on("mouseup mouseleave", function() {
          clearTimeout(toDown);
          clearInterval(ivDown);
          MinStop();
        });
    });
  }
}(jQuery));

$('.spiner').spiner();
body {
  padding-top: 10px;
}

.btn-prescriptis .btn {
  border-radius: 0px;
  max-height: 46px;
  cursor: pointer;
  width: 50px;
}

.btn-prescriptis .btn-nums {
  background: #fff !important;
  color: #555 !important;
  outline: none !important;
  box-shadow: none !important;
  width: 80px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="btn-group btn-prescriptis spiner" data-min="-6" data-max="3" data-step="0.25" data-maxerror="max" data-minerror="min">
  <button type="button" class="btn btn-secondary btn-less">-</button>
  <button type="button" class="btn btn-secondary btn-nums">0.00</button>
  <button type="button" class="btn btn-secondary btn-add">+</button>
</div>

<div class="container">
  <div class="col-12 result"></div>
</div>

关于javascript - 按钮 mousedown 不会在断点处停止，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54897248/

上一篇：javascript - 使用javascript重命名输入中的文本(每点更改空间)

下一篇：javascript - 使用 jquery 删除动态创建的行并绑定(bind)/更新现金总额

相关文章：

javascript - 最后插入的元素闪烁颜色

javascript - 类名作为带有附加代码的函数中的变量

jquery - 防止 jQuery 缓存破坏在使用 `html(...)` 函数的 AJAX 回调期间加载的资源

java - 从 GWT JSNI 调用 jquery

javascript - 如何从json中搜索文本并以html显示？

javascript - for...of 循环。我应该使用 const 还是 let？

javascript - Ajax表单提交在另一个div中加载结果页面

javascript - Bootstrap 模式中的 SlickGrid 仅显示前两列数据

javascript - 如何更改大屏幕上的菜单对齐方式？

javascript - Bootstrap carousel-control 正在获取图像

©2024 IT工具网  联系我们