Сохранять масштабирование (или масштабирование) при нажатии клавиши мыши

Question

Я работаю над проектом, где мне нужно выполнить какую-то калибровку экрана.

Эта калибровка работает так, что при нажатии кнопки плюса «кредитная карта» масштабируется и когда нажата кнопка «минус», она уменьшается на 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); 
}); 

Вы можете посмотреть на 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);