问

防止输入范围html元素上的mousedown事件,仍然允许用户拖动滑块

飞鱼发布于 2023-02-12 18:57

input

那么有没有办法在输入范围元素上禁用mousedown和/或click事件,但同时让用户拖动滑块并仍然触发更改事件？禁用点击线但仍然可以拖动滑块.我想阻止用户在滑块中间跳转(使用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");
});

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

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

1 个回答

您可以使用CSS 假点类给予thumb的input pointer-events:auto(让鼠标事件),并给出了输入范围的其余部分pointer-events: none(不允许鼠标事件).

该文档的pointer-events规定:

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

指针事件:自动

该元素的行为与未指定pointer-events属性时的行为相同.在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"/>
2023-02-12 19:01 回答鐘彦璋864175



    
    
        今天，你开发时遇到什么问题呢？
        立即提问
    

    
        热门标签

防止输入范围html元素上的mousedown事件,仍然允许用户拖动滑块

指针事件:自动

指针 - 事件:无