Mousedown 防止 mousemove 触发

Question

我制作了两个图像滑块，每个图像滑块都有一个可以独立触发的拖动条。这个想法是，当您抓住其中一个拖动条时，您可以在按住鼠标按钮的同时将其向左或向右拖动。拖动条周围的两个图像的宽度会根据拖动条的位置而变化。

我创建了一个名为 drag 的布尔变量，用于跟踪鼠标事件。在单击其中一个拖动条并按住鼠标时，该变量将设置为 true。当鼠标按钮被释放时（在窗口的任何地方），该变量将被设置为 false。

当移动鼠标（窗口中的任何位置）时，将触发回调函数 (dragImg) 以检查拖动变量是否设置为 true。如果是这样，该函数将改变拖动条的位置和周围图像的宽度。

我的问题是：当鼠标按钮被按住时，不会触发dragImg。该功能仅在释放鼠标按钮时触发。如何在按住鼠标按钮的同时触发dragImg函数？

var warea = 0, locktarget = 0, xprev = 0, drag = false;
var dragbars = document.querySelectorAll('.drag-bar');
loadImg();
window.addEventListener('resize', loadImg, false);
dragbars.forEach(function(el) {
    el.addEventListener('mousedown', lockImg, false);
    el.addEventListener('touchstart', lockImg, false);
});
document.addEventListener('mousemove', dragImg, false);
document.addEventListener('touchmove', dragImg, false);
document.addEventListener('mouseup', releaseImg, false);
document.addEventListener('touchend', releaseImg, false);
function loadImg() {
    var area = document.getElementsByClassName('drag-area');
    warea = parseInt(getComputedStyle(area[0]).getPropertyValue('width'));
    var elements = document.querySelectorAll('[class*=drag]');
    elements.forEach(function(el) {
    	el.style.height = warea / 2 + 'px';
    });
    var img = document.querySelectorAll('[class*=drag-img]');
    img.forEach(function(el) {
    	el.style.width = '50%';
    	el.style.backgroundSize = warea + 'px';
    });
    dragbars.forEach(function(el) {
    	el.style.left = '49%';
    });
};
function lockImg(ev) {
    var e = getEvent(ev);
    drag = true;
    xprev = e.clientX;
    locktarget = e.target;
};
function dragImg(ev) {
    if (drag) {
    	var e = getEvent(ev);
        var x = e.clientX - xprev;
  		var imgleft = locktarget.previousElementSibling;
       	var wimgleft = parseInt(getComputedStyle(imgleft).getPropertyValue('width')) + x;
        var dragbar = locktarget;
        var wbar = parseInt(getComputedStyle(dragbar).getPropertyValue('width')) / 2;
        var imgright = locktarget.nextElementSibling;
        var wimgright = parseInt(getComputedStyle(imgright).getPropertyValue('width')) - x;
        var xbound = warea - wbar;
        if (wimgleft < wbar || wimgright > xbound) {
            wimgleft = wbar;
            wimgright = xbound;
        }
        else if (wimgleft > xbound || wimgright < wbar) {
            wimgleft = xbound;
            wimgright = wbar;
        }
        imgleft.style.width = wimgleft + 'px';
        dragbar.style.left = wimgleft - wbar + 'px';
        imgright.style.width = wimgright + 'px';
        xprev = e.clientX;
    }
};
function releaseImg() {
    drag = false;
    xprev = 0;
};
function getEvent(ev) {
    return ev.touches ? ev.touches[0] : ev;
};

.drag-area {
    width: 100%;
    position: relative;
    overflow: hidden;
}
.drag-area div {
    float: left;
}
.drag-bar {
    position: absolute;
    width: 2%;
    cursor: col-resize;
}
.drag-img-left    { background: url(https://dgbes.com/images/drag-ff-1.jpg) left top; }
.drag-img-right   { background: url(https://dgbes.com/images/drag-ff-2.jpg) right top; }

<div class="drag-area">
    <div class="drag-img-left"></div>
    <img class="drag-bar" src="https://dgbes.com/images/dragbar.png" alt="dragbar" />
    <div class="drag-img-right"></div>
</div>
<div class="drag-area">
    <div class="drag-img-left"></div>
    <img class="drag-bar" src="https://dgbes.com/images/dragbar.png" alt="dragbar" />
    <div class="drag-img-right"></div>
</div>

Answer 1

问题似乎是因为拖动与选择冲突。这两个事件都涉及 mousedown 和随后的 mousemove。通过在getEvent(ev) 中添加ev.preventDefault();，我的问题就解决了。