时间戳

首页 > 解决方案 > javascript mousedown 事件后不需要的行为

javascript - javascript mousedown 事件后不需要的行为

问题描述

我在这里做了一个小提琴，我正在使用 Chrome。我想将左边的红色虚线/点线拖到右边。在 mouseup 或超出容器的一部分时添加一个新的 flex 列，具体取决于已添加的列数。现在我只是尝试添加最多 5 列。第一个“拖动”按预期工作

现在我想重复这些步骤并添加另一个。但现在行为不同了：

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

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);
    }
});

标签： javascript

解决方案

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.

推荐阅读