使用 transform translate、mousemove 和 pageX (pageY) 约束块位移

Question

我正在使用mousemove 事件调整框的大小和位置。那些。我将transform translate 和width (height) 更改为pageX (pageY)。但是由于鼠标事件mousemove 并不总是有时间被处理（例如，如果您快速移动鼠标）或没有时间读取条件，因此该块超出范围。 问题：在这种情况下我需要怎么做才能使块不超出边界？

大致是这样的。那些。在本例中，second_block 在first_block (500px) 之外，即它没有时间读取条件。这个问题应该如何解决？也为了方便https://jsfiddle.net/ManuOP/t1r4szdx/3/

<div id="first_block" class="first_block">
    <div id="auxiliary_block"> 
        <div id="second_block" class="second_block"></div>
        <input id="point" class="point" name="name_point" type="button">
    </div>
</div>
<script src="1.block_in_center_question.js"></script>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
div {
    display: flex;
    flex-direction: column;
}
div.first_block {
    height: 300px;
    width: 500px;
    background: green;
}
div#auxiliary_block {
    position: absolute;
}
div.second_block {
    height: 200px;
    width: 300px;
    background: orange;
}
input.point {
    position: absolute;
    cursor: pointer;
    height: 14px;
    width: 14px;
    border: none;
    background: black;
    right: -7px;
    top: 50%;
}

"use strict";
let second_block = document.getElementById('second_block');
let point = document.getElementById('point');
function change_second_block() {
    if(second_block.clientWidth < 500) {
        second_block.style.width = `${start_x + event.pageX}px`;
    }
}
point.addEventListener('mousedown', (event) => {
    window.start_x = second_block.clientWidth - event.pageX;
    document.addEventListener('mousemove', change_second_block);
});

Answer 1

您可以只测试新宽度，如果它太大，则将其限制为不超过最大值。

这个 sn-p 对 x 方向执行此操作，并强制它保持在 500 像素或以下。

"use strict";
let second_block = document.getElementById('second_block');
let point = document.getElementById('point');

function change_second_block() {
  if (second_block.clientWidth < 500) {
    second_block.style.width = (start_x + event.pageX) < 500 ? `${start_x + event.pageX}px` : '500px';
  }
}
point.addEventListener('mousedown', (event) => {
  window.start_x = second_block.clientWidth - event.pageX;
  document.addEventListener('mousemove', change_second_block);
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

div {
  display: flex;
  flex-direction: column;
}

div.first_block {
  height: 300px;
  width: 500px;
  background: green;
}

div#auxiliary_block {
  position: absolute;
}

div.second_block {
  height: 200px;
  width: 300px;
  background: orange;
}

input.point {
  position: absolute;
  cursor: pointer;
  height: 14px;
  width: 14px;
  border: none;
  background: black;
  right: -7px;
  top: 50%;
}

<div id="first_block" class="first_block">
  <div id="auxiliary_block">
    <div id="second_block" class="second_block"></div>
    <input id="point" class="point" name="name_point" type="button">
  </div>
</div>

Answer 2

如果项目中的更改大小超过某个限制，或者通过检查限制并停止更新，您可以解决此问题。我通过如下更新代码来防止鼠标快速移动导致的溢出：

function change_second_block()
{
    console.log("Event.PageX: " + event.pageX);

    if(event.pageX < 500 )
    {
        if(second_block.clientWidth < 500)
        {
            second_block.style.width = `${start_x + event.pageX}px`;
        }
    }
}

参考文献

• Javascript mouse event not captured properly when mouse moved very fast