javascript - 使用基于位置的 MouseEvent 触发输入 slider 的更改

Question

使用给定的代码:

var i = document.createElement("input");
i.type='range';
i.style.width = window.innerWidth + 'px';
i.style.height=window.innerHeight + 'px';
i.style.position = "absolute";
i.style.top = 0;
i.style.left = 0;
document.body.appendChild(i);

我得到一个覆盖整个视口(viewport)的 slider ，并且我单击的任何位置都会将 slider 点移动到等效的 x 位置。当我尝试使用 MouseEvent 模拟鼠标单击范围输入元素来移动 slider 点时，我没有得到相同的结果

var evt = new MouseEvent('click', {
    button: 0,
    detail: 1,
    screenX: 20,
    screenY: 50,
    clientX: 20,
    clientY: 50,
    bubbles: true,
    composed: true
});
i.dispatchEvent(evt);

如何以与使用鼠标相同的方式通过编程触发 slider 移动到相应的 x 位置？

Answer 1

范围输入根据其值、最大值和最小值确定其位置。您不需要模拟鼠标点击；只需相应地设置其值即可。创建输入时您不会自己设置最小值和最大值，因此它将使用默认范围 [0, 100]。这实际上使数学变得非常简单。

一般来说，您可以使用以下公式将 slider 置于正确的位置:

i.value = (desired_x - min_x) / width * (max - min) + min

由于 max = 100、min = 0、min_x = 0 且 width = window.innerWidth，因此可简化为:

i.value = desired_x / window.innerWidth * 100