镜像/复制鼠标动作javascript答案

【问题标题】：Mirror/Duplicate mouse action javascript镜像/复制鼠标动作javascript
【发布时间】：2016-04-21 10:26:27
【问题描述】：

这是我的小提琴

handler = function(e) {
  new_e = new e.constructor(e.type, e.originalEvent);

  console.log(new_e.type)
    //var ev = new Event("look", new_e);
  document.getElementById("box2").dispatchEvent(new_e);
}
var box1 = document.getElementById('box1');
box1.addEventListener('dragstart', handler);
box1.addEventListener('dragend', handler);
box1.addEventListener('drag', handler);
box1.addEventListener('click', handler);
box1.addEventListener('dblclick', handler);
box1.addEventListener('mousedown', handler);
box1.addEventListener('mouseup', handler);
box1.addEventListener('mouseover', handler);
box1.addEventListener('mouseout', handler);
box1.addEventListener('mousemove', handler);

//var box2 = document.getElementById('box2');
//box2.addEventListener('dragstart', function(e) { console.log('Entered into #box2'); });
//box2.addEventListener('dragend', function(e) { console.log('Leaving #box2'); });

<div id="box1" style="width: 100px; height: 100px; background-color: navy;">test test test test test</div>
<div id="box2" style="width: 100px; height: 100px; background-color: green;">test test test test test</div>

https://jsfiddle.net/Dilip/8295uxzk/

我想要实现的是，我需要捕获从一个容器（Div）到另一个容器的所有鼠标操作。就像我在第一个 div 上从 clientX:10 到 clientX:40 选择文本一样，它应该在另一个 div 上选择相同的位置，位置为 clientX:10 到 clientX:40

为了实现上面我做了一个小代码。在上面的示例中，如果我选择蓝色框上的文本，它应该通过克隆鼠标事件来选择绿色框上的文本。请帮帮我。

提前致谢。

【问题讨论】：

嗯，跟踪似乎有效...
是的，跟踪有效，但是绿框没有用我的鼠标移动..:(
我在您的代码中看不到任何可以实现这一点的内容。就此而言，即使是蓝色框也不会真正“拖动”。它只是变成幽灵并与鼠标一起移动 - 然后在按钮抬起时迅速恢复。
感谢您的回复，我同意这是一个出现的问题。我想说的是我需要在另一个 div 上发生相同的操作。请检查这个小提琴jsfiddle.net/Dilip/8295uxzk/2 当我选择 div 1 上的文本时，它应该选择 div 2 上的文本
我已经更新了我的描述。

标签： javascript events dom mouseevent

【解决方案1】：

我很确定您不能一次选择多个字符串。您可以突出显示或以其他方式更改两个字符串的外观，但我认为您所指的“鼠标”字符串选择功能本质上是单个字符串 - 即使您以编程方式进行。有一些引用“选定”文本的方法，如果有多个，我不知道它们将如何工作。

这里有一些discussion of selection，我推断有一个节点可以在给定的 DOM 上进行选择。

但是，当检测到选择时，我的方法是在两个 div 上使用其他类型的突出显示。然后，您可以在检测到拖动时创建新元素以在屏幕上“幻影”。

【讨论】：