Question

仅使用普通JavaScript，没有jQuery或其他库。

编写一个小工具，通过模拟textarea元素的行为来设置某个元素的宽度和高度。

单击右下角的灰色方块，光标变为“东南”光标，同时按住鼠标左键可以调整大小，放开鼠标时调整大小；就像textarea一样。这是示例代码；大小可调整的内容是带有div：scroll;的div；但目标是它可以与任何东西配合使用（我打算将其与iframe一起使用）。

function DOMRender() {
    // clear the entire <li> inside <ul> 
    DOMList.innerHTML = ''

    // render each <li> to <ul>
    arrayOfList.forEach( function( currentValue, index ) {
        const li = DOMList.appendChild(document.createElement('li'));
        li.innerHTML = `${currentValue} <a href='#'>&times;</a>`
        li.querySelector('a').addEventListener('click', () => onDelete(index));
    })
}

它在Firefox和IE中可以正常工作，但只能在Chrome中间歇地使用。（尚未在Safari中进行测试）。

以下是Chrome中发生的情况：将鼠标向下按在手柄上，然后猛烈地拉动它。这样做5次左右。在某个时候，它将停止工作，并且光标将变成类似这样的内容

如果您再次单击该手柄而不移动，它将恢复工作，但是如果猛烈地猛拉，将再次停止工作。无论我尝试了多少，我都无法在FF或IE上获得此行为。

这是什么？我的代码中有错误吗？如果是Chrome浏览器，它是什么，它可以解决吗？

更新对于那些复制和粘贴代码的情况：您需要控制负宽度/高度。

Answer 1

在尝试调整大小时，您可能会选择.resizer，可以将user-select: none的样式设置为.resizer以避免被选择：

table.resizerTable {
    border-spacing  : 0;
    border-collapse : separate;
    user-select: none;
}

<!DOCTYPE html><html lang="en"><head>

<meta charset="utf-8">
<title>resize test</title>

<style>
    table.resizerTable {
        border-spacing  : 0;
        border-collapse : separate;
        user-select: none;
    }
    table.resizerTable td { padding: 0; }
    table.resizerTable div.resizer {
        width  : 20px;
        height : 20px;
        cursor : se-resize;
        background-color: #bbb;
    }
    table.resizerTable div.resizer:active {
        background-color: red;
    }
    div#resizee {
        overflow: scroll;
    }
</style>

<script type="text/javascript">
var resizee = {
    getWidth: function(){
        return parseFloat(document.getElementById("resizee").style.width);
    },
    getHeight: function(){
        return parseFloat(document.getElementById("resizee").style.height);
    },
    setWidth: function(w){
        document.getElementById("resizee").style.width = w + 'px';
    },
    setHeight: function(h){
        document.getElementById("resizee").style.height = h + 'px';
    },
};
var resizer = {
    start : null,
    mousedown: function(elt, evt){
        var mainButtonDown = !!(evt.buttons % 2);
        if (!mainButtonDown) return;
        this.start = {
            x      : evt.clientX,
            y      : evt.clientY,
            width  : resizee.getWidth(),
            height : resizee.getHeight()
        };
    }
};
function mousemove(evt){
    var mainButtonDown = !!(evt.buttons % 2);
    if (mainButtonDown){
        var start = resizer.start;
        if (start){
            var x      = evt.clientX,
                y      = evt.clientY,
                dx     = x - start.x,
                dy     = y - start.y,
                width  = start.width  + dx,
                height = start.height + dy;
            resizee.setWidth(width);
            resizee.setHeight(height);
        } else {
        }
    } else {
        resizer.start = null;
    }
    //var compSty = getComputedStyle(evt.target);
}
function mouseup(){
    resizer.start = null;
}
function bodyOnload(){
    document.addEventListener('mousemove', mousemove);
    document.addEventListener('mouseup', mouseup);
    resizee.setWidth(300);
    resizee.setHeight(150);
}
</script>

</head><body onload="bodyOnload();">

<table class="resizerTable">
    <tr>
        <td>
            <div id="resizee">
                <fieldset>
                    <legend>legend title</legend>
                    <fieldset>
                        <legend>inner legend title</legend>
                        lorem ipsum dolor sit amet consectetur adipiscing elit
                    </fieldset>
                    <ul><li>foo</li><li>bar</li><li>blah blah</li><li>kvatsh</li><li>one</li><li>zwei</li><li>cinque</li></ul>
                </fieldset>
            </div>
        </td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td>
            <div onmousedown="resizer.mousedown(this, event)" id="resizer" class="resizer"></div>
        </td>
    </tr>
</table>

<div></div>

</body></html>

HTML / Javascript Resizer小工具在Chrome中无法正常运行

1 个答案: