在元素外部触发Javascript鼠标事件

Question

我正在尝试制作一个简单的拖动到调整大小的函数。 请参阅上面的示例。

如果将鼠标释放到<body>外部，则不会触发mouseup事件，这与本帖子的含义相反：响应IE中浏览器窗口之外的onmousemove事件

jsFiddle的拖动处理程序在此方面做得很好。 如果将鼠标释放到元素外部，则取消绑定mousemove事件；否则，将鼠标移开。 如果没有在元素外部释放鼠标并移回，请保留mousemove事件。 我该如何实现？

这是我的代码。 jsFiddle的调整大小功能还不够完善。 播放一段时间后，我触发了一个错误，并且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/

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

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

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

您还可以为元素设置最大宽度，以免元素溢出实体。 window.innerWidth为您提供窗口的当前最大宽度。

在元素外部触发Javascript鼠标事件

问题描述

1 个解决方案

解决方案1
1 已采纳

在元素外部触发Javascript鼠标事件

问题描述

1 个解决方案

解决方案1 1 已采纳

解决方案1
1 已采纳