Question

我做了一个小提琴here，并且正在使用Chrome。我想将左侧的红色虚线/虚线拖到右侧。当您超出容器的一部分时，会在mouseup上添加一个新的flex列，具体取决于已添加的列数。现在，我只尝试添加最多5列。第一个“拖动”效果符合预期

鼠标下移
按住鼠标右键向右拖动
在鼠标上或超过一定宽度时添加列

现在，我想重复这些步骤并添加另一个步骤。但是现在的行为有所不同：

鼠标下移
将其拖动到右侧但卡住了
我必须释放鼠标按钮并向右移动并退出该功能

这是一些代码，我在事件侦听器上尝试了一些带有气泡true或false的东西，但是没有运气。我应该使用其他事件吗？

var container = document.querySelector('.js-flex-container'),
    containerRow = container.querySelector('.js-flex-row'),
    oldX = 0,
    oldY = 0,
    rect = container.getBoundingClientRect(),
    mouseupEvent = new MouseEvent('mouseup'),
    newDiv,
    colCount,
    captureMouseMove = function captureMouseMove(event){
        var directionX = 0,
            directionY = 0;

        if ((event.clientX - rect.left) > oldX) {
            // "right"
            newDiv.style.width = oldX + 'px';

            if (oldX >= Math.round(rect.right / colCount)) {
                container.dispatchEvent(mouseupEvent);
            }
        }

        oldX = (event.clientX - rect.left);
    };

container.querySelector('.js-flex-column').addEventListener('mousedown', function(event){
    var colWidth = event.clientX - rect.left,
        columns = container.querySelectorAll('.col');

    colCount = columns.length + 1;

    newDiv = document.createElement('div');
    newDiv.className = 'col-x';
    columns[0].parentNode.insertBefore(newDiv, columns[0]);
    container.addEventListener('mousemove', captureMouseMove);
});

container.addEventListener('mouseup', function(){
    console.log('mouseup');

    if (typeof newDiv !== 'undefined') {
        newDiv.style.width = '';
        newDiv.className = 'col col-' + colCount;
        container.removeEventListener('mousemove', captureMouseMove);
    }
});

Answer 1

Chrome移动后正在对该事件进行某些操作（笨拙）。

添加event.preventDefault()应该可以解决问题


    captureMouseMove = function captureMouseMove(event){
        var directionX = 0,
            directionY = 0;

        if ((event.clientX - rect.left) > oldX) {
            // "right"
            newDiv.style.width = oldX + 'px';

            if (oldX >= Math.round(rect.right / colCount)) {
                container.dispatchEvent(mouseupEvent);
            }
        }

        oldX = (event.clientX - rect.left);
        event.preventDefault(); // <---
    };

我还建议您不要将container事件用于mouseup事件。而是使用window，以便在容器外部释放不会引起问题。您可以为mousemove做同样的事情。

javascript mousedown事件发生后的不良行为

1 个答案: