Question

我正在尝试制作一个简单的拖拽调整大小功能。请参阅上面的示例。

如果鼠标在<body>之外被释放，则不会触发mouseup事件，与此帖所暗示的相反：Responding to the onmousemove event outside of the browser window in IE

jsFiddle的拖动处理程序在这方面做得很好。如果鼠标在元素外部释放，则取消绑定mousemove事件;如果鼠标未在元素外部释放并重新移入，则保留mousemove事件。我怎样才能做到这一点？

这是我的代码。 jsFiddle的resize功能在完美之后并不完美。玩了一段时间后，我触发了一个错误，我的CSS面板消失了，所以我不能在这里发布我的CSS代码......

JS：

var initialX;
var leftPanel = document.getElementById("left");
var rightPanel = document.getElementById("right");
var resizePanels = function(e){
    var deltaX = e.clientX - initialX;
    var bodyWidth = parseInt(window.getComputedStyle(leftPanel).width);
    initialX = e.clientX;
    var newWidth = bodyWidth + deltaX;
    leftPanel.style.width = newWidth + "px";
    rightPanel.style.width =     (parseInt(window.getComputedStyle(document.body).width) - newWidth)*0.9 + "px";
}

var bodyUnbindResize = function(){
    document.body.removeEventListener("mousemove", resizePanels)
    document.body.style.cursor = "default";
}

document.getElementById("dragger").addEventListener("mousedown", function(){
    document.body.addEventListener("mousemove", resizePanels)
    document.body.addEventListener("mouseup", bodyUnbindResize)
    document.body.style.cursor = "col-resize";
});

HTML：

<div id="left" class="grid">
</div>
<div id="dragger" class="grid"></div>
<div id="right" class="grid">
</div>

如果你有更好的方法，请改进我的代码。这是我第一次使用vanilla JS来做这件事，所以这可能不是最好的方法。谢谢！

Answer 1

将听众附加到document.body时似乎无法正常工作，但如果将其附加到window，它确实有效。如果鼠标未被释放，即使您离开窗口边界，浏览器仍会检测到鼠标移动事件，这意味着它还能够检测鼠标何时被释放。这也意味着当你走出窗外的界限时，你会得到一个负值。你可以轻松解决这个问题。

https://jsfiddle.net/f8L300ug/8/

＆＃13;

var initialX;
var leftPanel = document.getElementById("left");
var rightPanel = document.getElementById("right");
var resizePanels = function (e) {
    // If the mouse is still down when dragging outside,
    // to the left of the window, e.clientX will be negative
    // and undesired behavior happens. 
    // To fix this, simply give it a value of 0 when it is below 0 (out of the window)
    var clientX = e.clientX < 0 ? 0 : e.clientX;
    var deltaX = clientX - initialX;
    var bodyWidth = parseInt(window.getComputedStyle(leftPanel).width, 10); // < It's a good idea to always
    var newWidth = bodyWidth + deltaX;                                      // specify a radix for parseInt
    initialX = clientX;
    leftPanel.style.width = newWidth + "px";
    rightPanel.style.width = (parseInt(window.getComputedStyle(document.body).width, 10) - newWidth) * 0.9 + "px";
}; // < It's a good idea to always close your `var` statements with a `;`

var bodyUnbindResize = function () {
    window.removeEventListener("mousemove", resizePanels);
    document.body.style.cursor = "default";
};

document.getElementById("dragger").addEventListener("mousedown", function () {
    // Attach the mouse listeners to the window
    window.addEventListener("mousemove", resizePanels);
    window.addEventListener("mouseup", bodyUnbindResize);
    document.body.style.cursor = "col-resize";
});

＆＃13;

.grid{
    height: 200px;
    user-select:none;
    webkit-touch-callout: none;
    -webkit-user-select: none;
}

#left{
    width: 50px;
    border-right: 1px solid #ccc;
    float:left;
    background: black;
}

#dragger{
    width: 5px;
    float:left;
    background-color:#eee;
    cursor: col-resize;
}

#right{
    width: 100px;
    border-left: 1px solid #ccc;
    overflow:hidden;
    background: blue;
}

＆＃13;

<div id="left" class="grid">
</div>
<div id="dragger" class="grid"></div>
<div id="right" class="grid">
</div>

＆＃13;

您还可以为元素设置最大宽度，以便它们不会溢出身体。 window.innerWidth为您提供窗口的当前最大宽度。

在元素外触发Javascript鼠标事件

1 个答案: