鼠標按下可防止鼠標移動觸發

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)我的問題解決了。