Empêcher l’événement mousedown sur l’élément html de la plage d’entrée tout en laissant l’utilisateur glisser le curseur

Existe-t-il donc un moyen de désactiver l’événement mousedown et / ou click sur l’élément de la plage d’entrée tout en laissant l’utilisateur glisser le curseur et le déclencher quand l’événement change? Désactivez le fait de cliquer sur la ligne tout en permettant au curseur d’être déplacé. Je voudrais empêcher les utilisateurs de sauter (avec mousedown / click) au milieu du curseur mais je veux les laisser le faire glisser pour que les changements de valeur.

Cela n’aide en rien, car le changement de plage s’appelle et gâche les numéros.

 $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"); });

Si j’appelle event.preventDefault (); sur le curseur de souris ne fonctionne pas et ne peut pas être traîné. Y a-t-il un moyen de contourner cela?

J’essaie de recréer cet effet au format HTML. Existe-t-il un effet JQuery pour ce genre un zoom?

Vous pouvez utiliser des pseudos-classes CSS pour donner la thumb des pointer-events:auto input pointer-events:auto (autoriser les événements de souris) et le rest de la plage.

La documentation relative pointer-events de pointer-events indique que:

La propriété CSS de pointeur-événements spécifie dans quelles circonstances (le cas échéant) un élément graphique particulier peut devenir la cible d’événements de souris.

Pointer-Events: auto

L’élément se comporte comme si la propriété pointer-events n’était pas spécifiée. Dans le contenu SVG, cette valeur et la valeur visiblePainted ont le même effet.

Pointer-Events: aucun

L’élément n’est jamais la cible d’événements de souris; Toutefois, les événements de souris peuvent cibler ses éléments descendants si les événements de pointeur sont définis sur une autre valeur. Dans ces circonstances, les événements de souris déclenchent des écouteurs d’événement sur cet élément parent, le cas échéant, vers / depuis le descendant au cours des phases de capture / bulle d’événement.

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

Voici une solution CSS pure

Vous pouvez contrôler des parties de la plage avec CSS et ainsi désactiver les événements de pointeur pour toutes ces parties sauf le curseur du curseur. De cette manière, les événements de clic ne sont enregistrés que lorsque le bouton du curseur est cliqué.

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

Utilisez les sélecteurs de pseudo-classes pour cibler le pouce et couvrir tous les principaux navigateurs de ce type.

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

Voici à quoi cela ressemblerait en action.

 $("#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; }

Vous pouvez utiliser du CSS pur

 #slider { pointer-events: none; }

Voici mon essai:

 //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: si vous déplacez le curseur rapidement, il sautera pas à pas, puis reviendra à la position initiale.

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

Pourquoi ne pas utiliser ” mouseup ” au lieu de ” clic “?

 $("#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); });

Est-ce ce que vous essayez d’accomplir? Expérimentez avec le violon si vous le souhaitez. 🙂