Как выполнить ".unbind('mousemove')", когда мышка выходит из блока
Всем привет. Делаю аудиоплеер, сделал шкалы времени и громкости. С помощью событий клика и наведения мышкой сделал регулировку. Но осталась одна проблема (такую проблему я замечал и в других плеерах).
Допустим, нажали мышкой на блок регулировки звука, и не отпуская, двигаем мышкой, регулируя звук. Если отпустить мышку в этом же блоке, то сработает функция "mouseup" и отвяжет "mousemove" к этому блоку. А вот если в нажатом виде выйти за пределы блока (например, пользователь захотел сделать 100% громкости и перетащил меняющий размеры блок за пределы общего блока под указатель громкости) и там уже отпустить кнопку - функция "mouseup" не сработает, и при последующем наведении мышкой на блок громкости, внутренний блок всё ещё будет двигаться за мышкой. Посоветуйте пожалуйста, как решить эту проблему? Вот мой код JS:
$("#vol").mousedown(function(e){
var offset = $(this).offset();
$("#volCont").width(e.clientX - offset.left);
vol = $("#volCont").width() / 100;
audio.volume = vol;
$("#vol").mousemove(function(e){
var offset = $(this).offset();
$("#volCont").width(e.clientX - offset.left);
vol= $("#volCont").width() / 100;
audio.volume = vol;
});
});
$("#vol").mouseup(function(){
$("#vol").unbind("mousemove");
});
|
Ваш регулятор не работает, когда указатель находится не над регулятором. Почему бы не прослушивать событие mousemove по всему документу?
Я модифицировал ваш код, вот что получилось (плохо получилось)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Audio player volume control UI test</title>
</head>
<body>
<style>
#vol {
width: 10em; height: 1em;
background: #eee;
cursor: ew-resize;
}
#volCont {
background: red;
width: 50%; height: 100%;
}
</style>
<div id="vol">
<div id="volCont"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
let isPointerDown = false;
$("#vol").on("mousedown", volumeHandler);
$(document).on("mousemove", volumeHandler);
$(document).on("mouseup", volumeHandler);
function volumeHandler(event) {
if(event.type === "mousedown") isPointerDown = true;
if(event.type === "mouseup") isPointerDown = false;
if(!isPointerDown) return;
var width = $("#vol").width();
var volume = Math.min(Math.max(0, event.offsetX / width), 1);
$("#volCont").width(width * volume);
console.log(volume);
// audio.volume = volume;
}
</script>
</body>
</html>
Плохо, поскольку в случае, когда у вас 2 плеера и пользователь захочет двумя пальцами регулировать, то у него ничего не получится. И вне окна не работает. И в HTML есть подобный элемент, так что выше даже "костыль"! Можно использовать HTMLInputElement для этой цели
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Audio player volume control UI test</title>
</head>
<body>
<input type="range" min="0" max="1" step="any" id="vol">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$("#vol").on("input", function(event) {
var volume = event.target.value;
console.log(volume);
// audio.volume = volume;
});
</script>
</body>
</html>
|
Malleys,
Я пробовал использовать "<meter>", когда планировал дизайн плеера, но впоследствии отказался, так как по оформлению с ним было туго. А как-то мне в голову не пришло использовать "<input type="range">". А ведь способ-то лучший! Спасибо большое! Спасибо и за второй, и за первый код - на примере увидел и понял, как можно действовать в подобных случаях! Но а я, пожалуй, перейду на "<input type="range">". |
Булат Азат улы,
если у вас UI подключен можно воспользоваться https://jqueryui.com/slider/ его стилизовать проще. |
j0hnik,
Нет, он у меня не подключен. Мне, лично, не нравятся такие штуки. Это же слишком большая нагрузка для сайта. На сайте у меня из сторонних библиотек подключены jQuery и mediaelementJS, от которого я и хочу избавиться, написав код сам. |
| Часовой пояс GMT +3, время: 17:37. |