Предотвратите событие mousedown на элементе html диапазона ввода и по-прежнему позволяйте пользователю перемещать слайдер

Таким образом, есть способ отключить mousedown и / или событие click на <input id = "slider" name = "slider" type = "range" value = "-1" min = "-1" max = "30" step = Элемент диапазона «1» />, но в то же время позволяет пользователю перемещать слайдер вокруг и по-прежнему запускать событие изменения? Отключите клик по строке, но все же включите слайдер. Я бы хотел, чтобы пользователи не прыгали (с mousedown / click) в середине слайдера, но я хочу позволить им перетащить его так, чтобы значение менялось. 

$slider.on('mousedown', function(event) {
    //event.preventDefault();
    this.value = -1;
    /* Act on the event */
    console.log("mousedown");
});
 $slider.on('click', function(event) {
    event.preventDefault();
    this.value = -1;
    /* Act on the event */
    console.log("click");
});

Это не помогает, так как при изменении диапазона звонки вызываются и заполняются номерами.

thumb

Если я вызываю event.preventDefault (); на mousedown слайдер не работает и не может быть перемещен. Есть ли способ обойти это.

Я пытаюсь воссоздать этот эффект в html, есть ли какой-либо эффект jquery для этого вида масштабирования?

javascript,jquery,html,

5

Ответов: 5

5 ов

Вы можете использовать CSS pseudos-классы , чтобы дать inputиз input pointer-events:auto(разрешить события мыши) и дать остальную часть входного диапазона pointer-events: none(не позволяют события мыши).

Документация для pointer-eventsгосударств , которые:

Свойство CSS указателя-событий указывает, при каких обстоятельствах (если таковые имеются) конкретный графический элемент может стать объектом событий мыши.

Указатель-события: авто

Элемент ведет себя так, как если бы свойство указателя-событий не указывалось. В SVG-содержимом это значение и значение visiblePainted имеют тот же эффект.

Указатель-события: нет

Элемент никогда не является объектом событий мыши; однако события мыши могут нацеливаться на его элементы-потомки, если у этих потомков есть указатели-события, установленные на какое-то другое значение. В этих обстоятельствах события мыши инициируют прослушиватели событий на этом родительском элементе по мере необходимости на пути к / из потомка во время фаз захвата / пузырька события.

input[type=range]{
  pointer-events: none;
}
input[type=range]::-webkit-slider-thumb{/*Webkit Browsers like Chome and Safari*/
  pointer-events: auto;
}
input[type=range]::-moz-range-thumb{/*Firefox*/
  pointer-events: auto;
}
input[type=range]::-ms-thumb{/*Internet Explorer*/
  pointer-events: auto;
}
<input type="range" value="0" min="0" max="100"/>

1

Вот чистое решение CSS

Вы можете управлять частями диапазона с помощью CSS и таким образом отключать события указателя для всех этих частей, кроме thumbслайдера. Таким образом, события click регистрируются только при нажатии кнопки слайдера.

pointer-events: none;          // disable all event on the range

Используйте селекторы псевдокласса, чтобы нацелить большой палец и накрыть все основные браузеры, подобные этому.

input[type=range]::-webkit-slider-thumb {   // support webkit (e.g. Chrome/Safari)
input[type=range]::-moz-range-thumb {       // support for Firefox
input[type=range]::-ms-thumb                // support for IE

Вот как это будет выглядеть в действии.

$("#slider").on('mousedown', function(event) {
  console.log('Mouse-down: only fired when thumb of the range is clicked');
});
$("#slider").on('mouseup', function(event) {
  console.log('Mouse-up: only fired when thumb of the range is clicked');
});
input[type=range] {
  pointer-events: none;
}

input[type=range]::-webkit-slider-thumb {
  pointer-events: auto;
}

input[type=range]::-moz-range-thumb {
  pointer-events: auto;
}

input[type=range]::-ms-thumb {
  pointer-events: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="slider" name="slider" type="range" value="-1" min="-1" max="30" step="1" />

Более подробную информацию о событиях-указателях можно найти в документах MDN .

0

Вы можете использовать чистый CSS

#slider {
    pointer-events: none;
}
0

Вот моя попытка:

//First block control click + move event
var current_value = $("#slider").val();
$("#slider").on('mousedown', function(event) {
    $("#slider").on("mousemove", function (e) {
    if ($("#slider").val() == parseInt(current_value)+1
    || $("#slider").val() == parseInt(current_value)-1) {
      current_value = $(this).val();
    } else {
      $("#slider").val(current_value);
    }
    })
});

//Second block control click on line
$("#slider").on("mouseup", function() {
      if ($("#slider").val() == parseInt(current_value)+1
    || $("#slider").val() == parseInt(current_value)-1) {
      current_value = $(this).val();
    } else {
      $("#slider").val(current_value);
    }
})

NB: если вы переместитесь, чтобы ускорить слайдер, он переместится на шаг, а затем вернется в исходное положение.

JSFiddle: https://jsfiddle.net/xpvt214o/674502/

-1

Почему бы не использовать « mouseup » вместо « click »?

$("#slider").on('mousedown', function(event) {
    //event.preventDefault();
    /* Act on the event */
    console.log("mousedown", this.value);
});
 $("#slider").on('mouseup', function(event) {
    //event.preventDefault();
    /* Act on the event */
    console.log("mouseup", this.value);
});

Это то, чего вы пытаетесь достичь? Поэкспериментируйте со скрипкой, если хотите. :-)

JavaScript, JQuery, HTML,
Похожие вопросы
Яндекс.Метрика