Javascript 按下鼠标键时保持缩放（或缩小）

我正在做一个项目，我需要做一些屏幕校准

当按下加号按钮时，放大“信用卡”，当按下减号按钮时，缩小0.5毫米

一切正常，但当点击按钮时，“信用卡”只是放大或缩小了0.5毫米，所以我需要继续点击以进一步更改缩放。我希望在按下鼠标键时缩放保持不变，释放时停止缩放

下面是我的JavaScript代码：

var c = document.querySelector('.card'),
m = document.querySelector('.m'),
p = document.querySelector('.p'),
s = document.querySelector('.s'),
r = document.querySelector('.r'),
w = c.style.width = '54mm';

m.addEventListener('click', function() {
w = c.style.width = parseFloat(w) - 0.5 + 'mm';
});

p.addEventListener('click', function() {
w = c.style.width = parseFloat(w) + 0.5 + 'mm';
});

s.addEventListener('click', function() {
r.innerHTML = 54 / parseFloat(w);
});

---

您可以查看我现在使用的代码。有人能帮助我在现有代码中集成此函数吗？

您需要设置稍微不同的事件侦听器。这是我的解决方案-我相信这很清楚：

var c = document.querySelector('.card'),
    m = document.querySelector('.m'),
    p = document.querySelector('.p'),
    s = document.querySelector('.s'),
    r = document.querySelector('.r'),
    w = c.style.width = '54mm';

var min = false;
var max = false;

m.addEventListener('mousedown', function(event) {
      min = true;
});

m.addEventListener('mouseup', function(event) {
    min = false;
});

p.addEventListener('mousedown', function() {
    max = true;
});

p.addEventListener('mouseup', function() {
    max = false;
});

s.addEventListener('click', function() {
    r.innerHTML = 54 / parseFloat(w);
});

setInterval(function() {
    if(min) {
        w = c.style.width = parseFloat(w) - 0.5 + 'mm';
    }
}, 100);

setInterval(function() {
    if(max) {
        w = c.style.width = parseFloat(w) + 0.5 + 'mm';
    }
},100);