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

debugcn 发表于 Dev

mathheadinclouds

仅使用原始JavaScript，不使用jQuery或其他库。

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

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

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

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

<style>
    table.resizerTable {
        border-spacing  : 0;
        border-collapse : separate;
    }
    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>

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

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

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

这是什么？我的代码中有错误吗？如果Chrome浏览器支持某些功能，可以解决该问题吗？

对于复制和粘贴代码的UPDATE：您需要控制负宽度/高度。

叫喊

尝试调整大小时，您可能会选择.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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。