确定进度条上的单击位置
Determine click position on progress bar?
是否可以使用纯JavaScript确定用户单击进度条的值/位置?
目前,我可以检测到元素的点击,但只能获取柱的当前位置,与用户的点击无关。
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);
});
您可以像这样获取您在元素内部单击的位置的坐标:
只需从单击页面的坐标中减去元素的偏移位置即可。
更新的示例
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);
});
如果要确定单击事件是否发生在值范围内,则必须将单击的值(相对于元素的宽度)与进度元素上设置的值属性进行比较:
这里的例子
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>
$(document).ready(function() {
$(".media-progress").on("click", function(e) {
var max = $(this).width(); //Get width element
var pos = e.pageX - $(this).offset().left; //Position cursor
var dual = Math.round(pos / max * 100); // Round %
if (dual > 100) {
var dual = 100;
}
$(this).val(dual);
$("#progress-value").text(dual);
});
});
.media-progress {
/*BG*/
position: relative;
width: 75%;
display: inline-block;
cursor: pointer;
height: 14px;
background: gray;
border: none;
vertical-align: middle;
}
.media-progress::-webkit-progress-bar {
/*Chrome-Safari BG*/
background: gray;
border: none
}
.media-progress::-webkit-progress-value {
/*Chrome-Safari value*/
background: #17BAB3;
border: none
}
.media-progress::-moz-progress-bar {
/*Firefox value*/
background: #17BAB3;
border: none
}
.media-progress::-ms-fill {
/*IE-MS value*/
background: #17BAB3;
border: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<progress value="5" max="100" class="media-progress"></progress>
<div id="progress-value"></div>
投票最多的答案实际上不会普遍起作用。这是因为您必须考虑所有偏移量父母的所有偏移量左边。这是一个改进的答案。我希望它有所帮助。
__addProgressBarListener () {
document.getElementById('video-player-progress-bar').addEventListener('click', function (e) {
let totalOffset = this.offsetLeft
let parent = this.offsetParent
const maximumLoop = 10
let counter = 0
while (document.body !== parent && counter < maximumLoop) {
counter += 1
totalOffset += parent.offsetLeft
parent = parent.offsetParent
}
const x = e.pageX - totalOffset // or e.offsetX (less support, though)
const clickedValue = x / this.offsetWidth
console.log('x: ', x)
console.log('clickedValue: ', clickedValue)
})
},
如果您希望单击通用max
值的值(在本例中为 0 到 1 之间的值),则只需要一些简单的数学运算。
document.getElementById('progressBar').addEventListener('click', function (e) {
var value_clicked = e.offsetX * this.max / this.offsetWidth;
alert(value_clicked);
});
小提琴
我测试了您的项目,请尝试以下解决方案:
document.getElementById('progressBar').addEventListener('click', function (e) {
var x = e.pageX - this.offsetLeft;
//Uncomment the following line to activate alert
//alert('Current position: ' + document.getElementById('progressBar').position);
//Save position before the click
var startPos = document.getElementById('progressBar').position;
//Convert x value to progress range [0 1]
var xconvert = x/300; //cause width is 300px and you need a value in [0,1] range
var finalx = (xconvert).toFixed(1); //round up to one digit after coma
//Uncomment the following line to activate alert
//alert('Click value: ' + finalx);
//If you don't want change progress bar value after click comment the following line
document.getElementById('progressBar').value = finalx;
document.getElementById('result').innerHTML = ('Start position: ' + startPos + "<br/><br/>");
document.getElementById('result').innerHTML += ('Current position: ' + document.getElementById('progressBar').position + "<br/>");
document.getElementById('result').innerHTML += ('Current value: ' + document.getElementById('progressBar').value + "<br/></br/>");
document.getElementById('result').innerHTML += ('Real click value: ' + xconvert + "<br/>");
document.getElementById('result').innerHTML += ('Current value set in progressbar: ' + finalx + "<br/>");
});
#progressBar {
width:300px;
}
<progress id="progressBar" value="0.5" max="1"></progress>
<div id="result"></div>
- 我将你的进度条宽度设置为 300px(你可以改变它)
- 获取进度条中的位置 x
- 转换 x 位置范围从 [0,300] 到 [0,1]
- 更改进度条内的值
输出:
- 起始位置
- 当前位置和值(单击后)
- 实际点击价值(未向上舍入)
- 进度条中设置的值(向上舍入)
工作演示:http://jsfiddle.net/Yeti82/c0qfumbL
感谢 bobbyrne01 的更新更正!
我用纯javascript找到了一个简单的解决方案。
使用 getBoundingClientRect() 有所有属性来计算百分比。
document.getElementById('progressBar').addEventListener('click', function (e) {
var bounds = this.getBoundingClientRect();
var max = bounds.width //Get width element
var pos = e.pageX - bounds.left; //Position cursor
var dual = Math.round(pos / max * 100); // Round %
console.log('percentage:', dual);
});
click
事件实际上采用一个参数,该参数包含事件信息(包括点击位置信息)。 您可以使用它来确定单击在进度条中发生的位置。
document.getElementById('progressBar').addEventListener('click', function (event) {
document.getElementById('result').innerHTML = ('Current position: ' + document.getElementById('progressBar').position + "<br/>");
document.getElementById('result').innerHTML += ('Current value: ' + document.getElementById('progressBar').value + "<br/>");
document.getElementById('result').innerHTML += ('Mouse click (absolute): ' + event.offsetX + ", " + event.offsetY + "<br/>");
});
<progress id="progressBar" value="0.5" max="1"></progress>
<div id="result"></div>
对于那些愿意使用滑块而不是进度条的人来说,获取值会容易得多:
.HTML
<input type="range" min="0" max="100" value="50" id="slider">
JavaScript
const slider = document.getElementById('slider');
slider.onclick = () => alert('Current value: ' + slider.value);
相关文章:
- 在单击任何位置时隐藏元素,而不检查每次DOM单击
- 如何在显示侧边栏时禁用背景,单击除侧边栏之外的任何位置都会关闭侧边栏
- 在TWebBrowser(谷歌地图)中显示位置,而无需单击按钮
- 防止用户在jQuery Mobile中ajax加载页面时单击其他位置
- 如何查找离单击位置最近的子项
- JS-是否可以获得元素单击位置的确切宽度
- 在单击位置显示动画
- 创建存储按钮单击位置的数组
- 确定进度条上的单击位置
- 将对象附加到具有绝对位置的单击位置
- 获取鼠标单击位置坐标
- 在单击位置打开弹出窗口
- 检测画布中的鼠标单击位置
- 通过滚动主页获得不同的高度单击位置
- 如何在单击位置旁边输出文本
- 在缩放图像上获得正确的单击位置
- Jquery拖动框到鼠标单击位置
- 在css调整大小后单击画布中的实际单击位置
- 将图像缩小到鼠标单击位置的坐标?(jQuery)
- 确定鼠标单击位置的位置