我有一个红色正方形div,位置是绝对的.

但它不允许在其周围的背景中 Select 文本.

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

我不想使用z-index属性.

你知道怎么做吗?我只想 Select 红色方块周围的文本,而不是方块下面的文本.提前谢谢你

Here is the Example

can't select text

推荐答案

Check on mousedown if it's the same div which you need.
And when mousemove, call event.preventDefault() only if isDown === true:

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(event) {
  if (event.target !== div) { /* <---- */
    return;
  }
  isDown = true;
  offset = [
    div.offsetLeft - event.clientX,
    div.offsetTop - event.clientY
  ];
}, true);

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

document.addEventListener('mousemove', function(event) {
  if (isDown) {
    event.preventDefault(); /* <---- */
    mousePosition = {
        x : event.clientX,
        y : event.clientY
    };
    div.style.left = (mousePosition.x + offset[0]) + 'px';
    div.style.top  = (mousePosition.y + offset[1]) + 'px';
  }
}, true);
body{
  height: 1000px;
  width: 1000px;
}
<div>You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.You need to enable JavaScript to run this app.</div>

Javascript相关问答推荐

如何在Node.js中减go 两个日期和时间?

我可以在useState中调用函数并使用其数据吗

为什么子组件没有在reaction中渲染?

在JavaScript中打开和关闭弹出窗口

foreach循环中的Typescript字符串索引

fetch在本地设置相同来源的cookie,但部署时相同的代码不会设置cookie

如何在JavaScript中在文本内容中添加新行

TypScript界面中的Infer React子props

每次子路由重定向都会调用父加载器函数

如何在Connect 4游戏中 for each 玩家使用位板寻找7形状?

为什么当我解析一个promise时,输出处于挂起状态?

在grafana情节,避免冲突的情节和传说

在我的html表单中的用户输入没有被传送到我的google表单中

加载背景图像时同步旋转不显示的问题

我创建了一个创建对象的函数,我希望从该函数创建的对象具有唯一的键.我怎么能做到这一点?

从包含数百行的表中获取更改后的值(以表单形式发送到后端)的正确方法是什么?

将核心模块导入另一个组件模块时存在多个主题

Next.js服务器端组件请求,如何发送我的cookie token?

当输入字段无效时,我的应用程序不会返回错误

AG-GRIDreact 显示布尔值而不是复选框