防止输入范围html元素上的mousedown事件，仍然允许用户拖动滑块 [英] Prevent mousedown event on input range html element and still let user drag slider

问题描述

那么有没有办法在输入范围元素上禁用mousedown和/或click事件，但同时让用户拖动滑块并仍然触发更改事件？
禁用点击线但仍然可以拖动滑块。
我想阻止用户在滑块中间跳转（使用mousedown / click），但我想让它们拖动它以便更改值。

So is there a way to disable mousedown and / or click event on input range element but at the same time let user drag slider around and still fire on change event? Disable clicking on line but still enable slider to be dragged around. I would like to prevent users to jump (with mousedown / click) in the middle of slider but i wanna let them drag it so value changes.

<input id="slider" name="slider" type="range" value="-1" min="-1" max="30" step="1" />

这没有帮助，因为调用范围变更会扰乱数字。

This does not help as on change for range gets called and messes up numbers.

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

如果我调用event.preventDefault（）;在mousedown滑块上不起作用，无法拖动。有没有办法解决这个问题。

If I call event.preventDefault(); on mousedown slider does not work and can not be dragged around. Is there a way around that.

我试图在html中重新创建这种效果这种缩放是否有任何jquery效果？

I am trying to recreate this effect in html is there any jquery effect for this kind a zoom?

推荐答案

您可以使用CSS pseudos-classes 给出输入的 thumb pointer-events：auto （允许鼠标事件）并给出其余的范围输入 pointer-events：none （不允许鼠标）事件）。

You can use CSS pseudos-classes to give the thumb of the input pointer-events:auto (allow mouse events) and give the rest of the range input pointer-events: none (do not allow mouse events).

指针事件的noreferrer>文档声明：

The documentation for pointer-events states that:

指针事件CSS属性指定在什么情况下（如果有）特定图形元素可以成为鼠标事件的目标。

The pointer-events CSS property specifies under what circumstances (if any) a particular graphic element can become the target of mouse events.

该元素的行为与指针的行为相同未指定-events属性。在SVG内容中，此值和值visiblePainted具有相同的效果。

The element behaves as it would if the pointer-events property were not specified. In SVG content, this value and the value visiblePainted have the same effect.

该元素永远不是鼠标事件的目标;但是，如果这些后代将指针事件设置为某个其他值，则鼠标事件可能会以其后代元素为目标。在这些情况下，鼠标事件将在事件捕获/冒泡阶段期间在发往/来自后代的路径上触发此父元素上的事件侦听器。

The element is never the target of mouse events; however, mouse events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, mouse events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.

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"/>

这篇关于防止输入范围html元素上的mousedown事件，仍然允许用户拖动滑块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！