gpt4 book ai didi

javascript - 防止在输入范围 html 元素上发生 mousedown 事件,并且仍然允许用户拖动 slider

转载 作者:太空狗 更新时间:2023-10-29 13:25:07 25 4
gpt4 key购买 nike

那么有没有办法在输入范围元素上禁用 mousedown 和/或 click 事件,但同时允许用户拖动 slider 并仍然触发更改事件?

禁止在线点击,但仍然允许拖动 slider 。我想阻止用户在 slider 中间跳转(使用鼠标按下/单击),但我想让他们拖动它以便值发生变化。

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

这没有帮助,因为范围的变化会被调用并弄乱数字。

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

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

我正在尝试在 html 中重新创建这种效果,这种缩放是否有任何 jQuery 效果?

最佳答案

您可以使用 CSS pseudos-classesinputthumb pointer-events:auto(允许鼠标事件)并给范围的其余部分输入 pointer -events: none(不允许鼠标事件)。

参见:pointer-events

input[type=range]{
pointer-events: none;
}
input[type=range]::-webkit-slider-thumb{/*Webkit Browsers like Chrome 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"/>

关于javascript - 防止在输入范围 html 元素上发生 mousedown 事件,并且仍然允许用户拖动 slider ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20387534/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com