是否可以使用普通的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>