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

Question

我正在进行项目，需要进行某种屏幕校准。

此校准的工作方式是，当按下“信用卡”时加号按钮被放大，按下减号按钮时，缩小0.5mm。

一切工作正常，但当按钮被点击“信用卡”只是放大或缩小为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); 
}); 

你可以看一下JSFiddle地看到，我现在使用的代码。有人可以帮助我将这个函数集成到现有的代码中吗？

Answer 1

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

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);