document.addEventListener 阻止文本区域中的突出显示

Question

我做了一个div可以移动但是不幸的是让用户移动div的功能也阻止了后面文本区域中文本的突出显示。

我想保留移动 div 的可能性，并按照我的意愿突出显示文本区域中的文本。

Ps：我已经尝试将 addEventListener 放在 varMoveButtonNotesWindow 上，但这样使用它真的很不舒服（我们需要将光标保持在小方框内，我不希望方框变大它看起来不太好）。

代码如下：

var mousePosition;
var offset = [0,0];
var isDown = false;
var varMoveButtonNotesWindow = document.getElementById('moveButtonNotesWindow');
var varNotesWindow = document.getElementById('notesWindow');

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

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

//The bug occurs here
document.addEventListener('mousemove', function(event) { 
    event.preventDefault();
    if (isDown) {
        mousePosition = {
    
            x : event.clientX,
            y : event.clientY
    
        };
        varNotesWindow.style.left = (mousePosition.x + offset[0]) + 'px';
        varNotesWindow.style.top  = (mousePosition.y + offset[1]) + 'px';
    }
}, true); 
//so far


function closeNotesWindow() {
  varNotesWindow.classList.remove('show');
}

function openNotesWindow() {
  windowsModalContainer.classList.remove('show');
  varNotesWindow.classList.add('show');
};

.firstTextarea {
  height: 300px;
  width: 300px;
}

#notesWindow {
  display: block;
  position: absolute;
  width: 300px;
  height: 275px;
  top: 0px;
  left: 0px;
  border: 2px solid #313131;
  z-index: 2;
  resize: both;
  overflow: auto;
}

#headerNotesWindow {
  height: 35px;
  background-color: black;
}


#moveButtonNotesWindow {
  position: absolute;
  background-color: blue;
  color: white;
  width: 20px;
  height: 20px;
  right: 5px;
  z-index: 1;
  top: 7.5px;
}

#closeButtonNotesWindow {
  position: absolute;
  background-color: red;
  color: white;
  width: 20px;
  height: 20px;
  right: 30px;
  z-index: 1;
  top: 7.5px;
}

#divTextareaNotesWindow {
  text-align: center;
  height: calc(100% - 6px - 35px);
}

#textareaNotesWindow {
  resize: none;
  width: calc(100% - 6px);
  height: 100%;
  outline: none;
}

<textarea class="firstTextarea">Pokemon is the best game of my childhood.</textarea>

<div class="divWindow" id="notesWindow">
    <div id="headerNotesWindow">
      <div id="moveButtonNotesWindow"></div>
      <div id="closeButtonNotesWindow" onclick="closeNotesWindow()"></div>
    </div>
  
    <div id="divTextareaNotesWindow">
      <textarea id="textareaNotesWindow"></textarea>
    </div>
  </div>

Answer 1

这个可以做，但不完美：

焦点返回时回滚选择。

var mousePosition;
var offset = [0,0];
var isDown = false;
var varMoveButtonNotesWindow = document.getElementById('moveButtonNotesWindow');
var varNotesWindow = document.getElementById('notesWindow');

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

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

//The bug occurs here
document.addEventListener('mousemove', function(event) { 
  event.preventDefault();
  if (isDown) {
    mousePosition = {

      x : event.clientX,
      y : event.clientY

    };
    varNotesWindow.style.left = (mousePosition.x + offset[0]) + 'px';
    varNotesWindow.style.top  = (mousePosition.y + offset[1]) + 'px';
  }
}, true); 
//so far

window.addEventListener('load',function(){
  var logTextSelection = function(event) {
    var tgItem = event.target;
    tgItem.setAttribute("lastSelectionStart",tgItem.selectionStart);
    tgItem.setAttribute("lastSelectionEnd",tgItem.selectionEnd);
  }
  var rollBackSelection = function(event){
    var tgItem = event.target;
    var lastSelectionStart = tgItem.getAttribute("lastSelectionStart");
    var lastSelectionEnd = tgItem.getAttribute("lastSelectionEnd");
    if((lastSelectionStart !== lastSelectionEnd)){
      tgItem.focus();
      tgItem.setSelectionRange(lastSelectionStart,lastSelectionEnd);
    }
  }
  var docTextareas = document.getElementsByTagName('textarea');
  for (var i = 0; i < docTextareas.length; i++) {
    docTextareas[i].addEventListener('select', logTextSelection, true);
    docTextareas[i].addEventListener('keyup', logTextSelection, true);
    docTextareas[i].addEventListener('focus', rollBackSelection, true);
  }
});


function closeNotesWindow() {
  varNotesWindow.classList.remove('show');
}

function openNotesWindow() {
  windowsModalContainer.classList.remove('show');
  varNotesWindow.classList.add('show');
};

.firstTextarea {
  height: 300px;
  width: 300px;
}

#notesWindow {
  display: block;
  position: absolute;
  width: 300px;
  height: 275px;
  top: 0px;
  left: 0px;
  border: 2px solid #313131;
  z-index: 2;
  resize: both;
  overflow: auto;
}

#headerNotesWindow {
  height: 35px;
  background-color: black;
}


#moveButtonNotesWindow {
  position: absolute;
  background-color: blue;
  color: white;
  width: 20px;
  height: 20px;
  right: 5px;
  z-index: 1;
  top: 7.5px;
}

#closeButtonNotesWindow {
  position: absolute;
  background-color: red;
  color: white;
  width: 20px;
  height: 20px;
  right: 30px;
  z-index: 1;
  top: 7.5px;
}

#divTextareaNotesWindow {
  text-align: center;
  height: calc(100% - 6px - 35px);
}

#textareaNotesWindow {
  resize: none;
  width: calc(100% - 6px);
  height: 100%;
  outline: none;
}

<textarea class="firstTextarea">Pokemon is the best game of my childhood.</textarea>

<div class="divWindow" id="notesWindow">
    <div id="headerNotesWindow">
      <div id="moveButtonNotesWindow"></div>
      <div id="closeButtonNotesWindow" onclick="closeNotesWindow()"></div>
    </div>
  
    <div id="divTextareaNotesWindow">
      <textarea id="textareaNotesWindow"></textarea>
    </div>
  </div>

Answer 2

好的，我找到了，我刚刚创建了一个 div 来替换 addeventListener 的文档。

Ps 我将颜色设置为 rgba(0, 175, 0, 0.3) 只是为了让您了解它的反应和工作方式，您显然可以将其更改为 0。

function start() {
  varNotesWindow.classList.add('show');
}

var mousePosition;
var offset = [0,0];
var isDown = false;
var varMoveButtonNotesWindow = document.getElementById('moveButtonNotesWindow');
var varNotesWindow = document.getElementById('notesWindow');
const constAlternativeDocumentForMoveButtonsWindow = document.getElementById('alternativeDocumentForMoveButtonsWindowId');

//Start Move Notes Window
varMoveButtonNotesWindow.addEventListener('mousedown', function(e) {
    isDown = true;
    offset = [
        varNotesWindow.offsetLeft - e.clientX,
        varNotesWindow.offsetTop - e.clientY
    ];
    constAlternativeDocumentForMoveButtonsWindow.classList.add('use');
}, true);


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

constAlternativeDocumentForMoveButtonsWindow.addEventListener('mouseup', function() {
  constAlternativeDocumentForMoveButtonsWindow.classList.remove('use');
});

document.addEventListener('mouseup', function() {
    isDown = false;
}, true);
//End Move Notes Window

function closeNotesWindow() {
  varNotesWindow.classList.remove('show');
}

function openNotesWindow() {
  windowsModalContainer.classList.remove('show');
  varNotesWindow.classList.add('show');
};

.alternativeDocumentForMoveButtonsWindowClass {
  display: none;
}

.alternativeDocumentForMoveButtonsWindowClass.use {
  display: block;
  position: absolute;
  z-index: 3;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: rgba(0, 175, 0, 0.3);
}


#notesWindow {
  display: none;
}

#notesWindow.show {
  display: block;
  position: absolute;
  width: 300px;
  height: 275px;
  top: 0px;
  left: 0px;
  border: 2px solid #313131;
  z-index: 2;
  resize: both;
  overflow: auto;
}

#headerNotesWindow {
  height: 35px;
  background-color: black;
}


#moveButtonNotesWindow {
  position: absolute;
  background-color: blue;
  color: white;
  width: 20px;
  height: 20px;
  right: 5px;
  z-index: 1;
  top: 7.5px;
}

#closeButtonNotesWindow {
  position: absolute;
  background-color: red;
  color: white;
  width: 20px;
  height: 20px;
  right: 30px;
  z-index: 1;
  top: 7.5px;
}

#divTextareaNotesWindow {
  text-align: center;
  height: calc(100% - 6px - 35px);
}

#textareaNotesWindow {
  resize: none;
  width: calc(100% - 6px);
  height: 100%;
  outline: none;
}

<button onclick='start()'>Let's Go</div>

<div class="alternativeDocumentForMoveButtonsWindowClass" id="alternativeDocumentForMoveButtonsWindowId"></div>
  
  <div class="divWindow" id="notesWindow">
    <div id="headerNotesWindow">
      <div id="moveButtonNotesWindow"></div>
      <div id="closeButtonNotesWindow" onclick="closeNotesWindow()"></div>
    </div>
  
    <div id="divTextareaNotesWindow">
      <textarea id="textareaNotesWindow"></textarea>
    </div>
  </div>

document.addEventListener 阻止文本区域中的突出显示

document.addEventListener blocking highlight in textarea

html

javascript

css

responsive