是否可以使用普通的javascript确定进度条上用户点击的值(value)/位置?

当前,我可以检测到元素上的单击,但是只能获取该条的当前位置,与用户的单击无关。

http://jsfiddle.net/bobbyrne01/r9pm5Lzw/

的HTML

<progress id="progressBar" value="0.5" max="1"></progress>

JS
document.getElementById('progressBar').addEventListener('click', function () {
    alert('Current position: ' + document.getElementById('progressBar').position);
    alert('Current value: ' + document.getElementById('progressBar').value);
});

最佳答案

您可以像这样在元素内部获取单击位置的坐标:

只需从单击页面的坐标中减去元素的偏移位置即可。

Updated Example

document.getElementById('progressBar').addEventListener('click', function (e) {
    var x = e.pageX - this.offsetLeft, // or e.offsetX (less support, though)
        y = e.pageY - this.offsetTop,  // or e.offsetY
        clickedValue = x * this.max / this.offsetWidth;

    console.log(x, y);
});

如果要确定click事件是否在值范围内发生,则必须将clicked值(相对于元素的宽度)与progress元素上设置的value属性进行比较:

Example Here

document.getElementById('progressBar').addEventListener('click', function (e) {
    var x = e.pageX - this.offsetLeft, // or e.offsetX (less support, though)
        y = e.pageY - this.offsetTop,  // or e.offsetY
        clickedValue = x * this.max / this.offsetWidth,
        isClicked = clickedValue <= this.value;

    if (isClicked) {
        alert('You clicked within the value range at: ' + clickedValue);
    }
});
<p>Click within the grey range</p>
<progress id="progressBar" value="5" max="10"></progress>

09-10 01:32
查看更多