鼠标按下可防止鼠标移动触发

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

出现此问题似乎是因为它与选择拖拽发生冲突。 这两个事件都涉及鼠标按下和随后的鼠标移动。 通过添加ev.preventDefault(); 在getEvent(ev)我的问题解决了。