我正在尝试为我正在为自己的练习/享受而做的项目编写一个没有 JQuery 的水平滑块。
以下是相关代码:
function moveit() {
"use strict";
document.getElementById("position").style.left = window.event.clientX + "px";
}
window.onload = function () {
"use strict";
findtime();
document.getElementById("scrollbar").style.width = document.getElementById("thevideo").offsetWidth + "px";
var mousemove;
document.getElementById("scrollbar").onclick = function () {
mousemove = window.setInterval("moveit()", 1000);
};
document.getElementById("scrollbar").mouseup = function () {
window.clearInterval(mousemove);
};
};
不用说我有问题。它不断在 Chrome、Firefox 等上生成错误:
Uncaught TypeError: Cannot read property 'clientX' of undefined
现在,如果我运行以下代码,它可以工作,但是(但对于跟随鼠标位置没有用):
document.getElementById("position").style.left = 12 + "px";
HTML如下:
<?php include("header.php"); ?>
<div>
<video id="thevideo">
<source src="movie.ogv" type="video/ogg" />
</video>
</div>
<div>
<span id="currenttime" contenteditable="true">0:00</span> / <span id="totaltime"></span>
</div>
<div id="scrollbar">
<div id="position" draggable="true"></div>
</div>
<?php include("footer.php"); ?>