Angular 4+水平可调整div实现求助：仅通过抓取器触发事件

嘿，我完全懂你现在的处境！作为Angular 4新手，要实现只通过grabber触发的水平可调整文本区域，确实得注意事件绑定的细节，我给你梳理一套实用的解决方案，一步步来～

我们的目标是：只有点击grabber元素时才触发调整操作，平时不在全局document上绑定多余事件。所以采用「临时绑定事件」的方式——按住grabber时给document添加mousemove和mouseup监听，松开鼠标后立即移除这些监听，既保证调整流畅，又符合你的事件绑定要求。

1. 组件模板（app.component.html） #

先搭建基础结构：文本区域+调整抓取器，给抓取器绑定mousedown事件触发调整，文本区域宽度用动态绑定：

<div class="resizable-container">
  <div class="text-area" [style.width.px]="currentWidth">
    这是可以水平调整宽度的文本区域，试试点击右侧的抓取器拖动吧！
  </div>
  <div class="grabber" (mousedown)="startResize($event)"></div>
</div>

2. 样式设置（app.component.css） #

给元素加上样式，让抓取器直观可交互：

.resizable-container {
  display: flex;
  align-items: stretch;
  width: fit-content;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.text-area {
  padding: 10px;
  min-width: 200px; /* 最小宽度，可自定义 */
  max-width: 800px; /* 最大宽度，可自定义 */
  word-wrap: break-word;
}

.grabber {
  width: 8px;
  background-color: #f5f5f5;
  cursor: ew-resize; /* 鼠标样式提示可水平调整 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.grabber:hover {
  background-color: #e0e0e0;
}

3. 组件逻辑（app.component.ts） #

实现调整的核心逻辑，临时绑定/移除document事件：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  currentWidth = 300; // 初始宽度
  startX = 0;
  startWidth = 0;

  startResize(event: MouseEvent) {
    // 记录鼠标初始位置和文本区域初始宽度
    this.startX = event.clientX;
    this.startWidth = this.currentWidth;
    
    // 临时给document添加调整和结束事件监听
    document.addEventListener('mousemove', this.onResize);
    document.addEventListener('mouseup', this.stopResize);
  }

  // 用箭头函数确保this指向组件实例，避免上下文丢失
  onResize = (event: MouseEvent) => {
    // 计算鼠标移动的距离，更新宽度
    const deltaX = event.clientX - this.startX;
    // 限制宽度在最小/最大值之间
    const newWidth = Math.max(200, Math.min(800, this.startWidth + deltaX));
    this.currentWidth = newWidth;
  }

  stopResize = () => {
    // 调整结束后，移除document上的临时监听
    document.removeEventListener('mousemove', this.onResize);
    document.removeEventListener('mouseup', this.stopResize);
  }
}

• 临时事件绑定：只有当你点击grabber时，才会给document添加mousemove和mouseup监听，松开鼠标就立即移除，完全符合你「鼠标事件仅绑定在抓取器上」的要求，不会在全局残留多余事件。
• 箭头函数的作用：onResize和stopResize用箭头函数定义，是为了保证函数内部的this始终指向组件实例，避免在事件监听中丢失上下文。
• 宽度限制：通过Math.max和Math.min限制文本区域的最小/最大宽度，防止调整过度，你可以根据需求修改数值。

这样实现后，点击grabber拖动就能水平调整文本区域宽度，松开鼠标就停止，完全满足你的需求～

内容的提问来源于stack exchange，提问作者Jasleen Kaur