时间戳

首页 > 解决方案 > 按住鼠标按钮时继续调整元素大小

javascript - 按住鼠标按钮时继续调整元素大小

问题描述

如何在鼠标按钮按下时不断调整元素的大小？
我试过mousedown- 没有成功。

$('button').on('mousedown', function(){
let targ = $('.targ');
let x = targ.height();
x++;
targ.height(x);
});
.targ{background:orange;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>PRESS</button>
<br><br>
<div class='targ'>LOREM</div>

标签： javascriptjquery

解决方案

您可以setInterval()在 mousedown 事件中添加一个，并在 mouseup 上清除它

这是一个将其设置为 50 毫秒的工作示例：

    var interval;
$('button').on({
  mousedown: function() {
    interval = setInterval(function() {
      let targ = $('.targ');
      let x = targ.height();
      x++;
      targ.height(x);
    }, 50);

  },
  mouseup: function() {
    window.clearInterval(interval);
  }
});

也在这里工作小提琴：https ://jsfiddle.net/qytd5h1n/2/

希望能帮助到你 ：）

推荐阅读