大家好,又见面了,我是你们的朋友全栈君。
setCapture不可作用于键盘等其它事件,只能作用于鼠标事件。主要用于: onmouseover 与 onmouseout 事件。
局限性:只兼容IE
<div id="box">
<div id="left"></div>
<div id="resize"></div>
<div id="right"></div>
</div>
<script>
window.onload = function () {
var resize = document.getElementById("resize");
var left = document.getElementById("left");
var right = document.getElementById("right");
var box = document.getElementById("box");
resize.onmousedown = function (e) {
var startX = e.clientX;
resize.left = resize.offsetLeft;
document.onmousemove = function (e) {
var endX = e.clientX;
var moveLen = resize.left + (endX - startX);
var maxT = box.clientWidth - resize.offsetWidth;
if (moveLen < 150) moveLen = 150;
if (moveLen > maxT - 150) moveLen = maxT - 150;
resize.style.left = moveLen;
left.style.width = moveLen + "px";
right.style.width = (box.clientWidth - moveLen - 5) + "px";
}
document.onmouseup = function (evt) {
document.onmousemove = null;
document.onmouseup = null;
resize.releaseCapture;
console.log('释放鼠标捕获', resize.releaseCapture)
}
resize.setCapture;
// resize.setCapture && resize.setCapture(true);
console.log('获取鼠标捕获', resize.setCapture)
return false;
}
}
当我在拖动中,其实setsetCapture函数和releaseCapture函数返回时undefined,这个也是因为兼容性问题导致。由现在仅仅只是支持IE浏览器😭😭😭
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/135044.html原文链接:https://javaforall.cn