如何在不使用z-index的情况下选中绝对定位div周围的背景文本

我有一个设置了position: absolute的红色方形div，但它导致周围的背景文本无法被选中。我不想使用z-index属性，只想选中红色方块周围的文本（而非方块下方的），请问有什么解决方法？

原代码 #

HTML #

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>React App</title>
  </head>
  <body>
    <div>You need to enable JavaScript to 
...more text..check example,,,...to run this app.You need to 
enable JavaScript to run this app.
You need to enable JavaScript to run this app.</div>
  
  </body>
</html>

JS #

var mousePosition;
var offset = [0,0];
var div;
var isDown = false;

div = document.createElement("div");
div.style.position = "absolute";

div.style.left = "100px";
div.style.top = "100px";
div.style.width = "100px";
div.style.height = "100px";

div.style.background = "red";
div.style.color = "blue";

document.body.appendChild(div);

div.addEventListener('mousedown', function(e) {
    isDown = true;
    offset = [
        div.offsetLeft - e.clientX,
        div.offsetTop - e.clientY
    ];
}, true);

document.addEventListener('mouseup', function() {
    isDown = false;
}, true);

document.addEventListener('mousemove', function(event) {
    event.preventDefault();
    if (isDown) {
        mousePosition = {
    
            x : event.clientX,
            y : event.clientY
    
        };
        div.style.left = (mousePosition.x + offset[0]) + 'px';
        div.style.top  = (mousePosition.y + offset[1]) + 'px';
    }
}, true);

解决方法 #

通过CSS的pointer-events属性可以实现需求，核心思路是让红色div不阻挡鼠标事件，同时保留拖动功能：

1. 给红色div设置pointer-events: none，这样鼠标事件会穿透div，下方的文本就能被正常选中。
2. 由于设置pointer-events: none后div无法接收拖动事件，需要在div内部添加一个覆盖整个区域的透明子元素（拖动手柄），给这个子元素设置pointer-events: auto，专门处理拖动的鼠标事件。
3. 移除mousemove事件中的event.preventDefault()，避免干扰文本选中的默认行为。

修改后的JS代码 #

var mousePosition;
var offset = [0,0];
var div;
var dragHandle;
var isDown = false;

div = document.createElement("div");
div.style.position = "absolute";
div.style.left = "100px";
div.style.top = "100px";
div.style.width = "100px";
div.style.height = "100px";
div.style.background = "red";
div.style.color = "blue";
// 让红色div不阻挡鼠标事件，允许文本选中
div.style.pointerEvents = "none";

// 创建拖动手柄，覆盖整个红色div
dragHandle = document.createElement("div");
dragHandle.style.position = "absolute";
dragHandle.style.top = "0";
dragHandle.style.left = "0";
dragHandle.style.width = "100%";
dragHandle.style.height = "100%";
dragHandle.style.cursor = "move";
// 手柄接收鼠标事件，保证拖动功能正常
dragHandle.style.pointerEvents = "auto";

div.appendChild(dragHandle);
document.body.appendChild(div);

// 给手柄绑定mousedown事件
dragHandle.addEventListener('mousedown', function(e) {
    isDown = true;
    offset = [
        div.offsetLeft - e.clientX,
        div.offsetTop - e.clientY
    ];
}, true);

document.addEventListener('mouseup', function() {
    isDown = false;
}, true);

document.addEventListener('mousemove', function(event) {
    if (isDown) {
        mousePosition = {
            x : event.clientX,
            y : event.clientY
        };
        div.style.left = (mousePosition.x + offset[0]) + 'px';
        div.style.top  = (mousePosition.y + offset[1]) + 'px';
    }
}, true);

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