镜像/重复鼠标操作javascript

时间:2016-01-15 18:39:41

标签: javascript events dom mouseevent

这是我的小提琴

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)的所有鼠标操作。就像我在第一个div上选择clientX:10clientX:40的文字一样,它应该在位置clientX:10clientX:40

的另一个div上选择相同的文本

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

提前致谢。

1 个答案:

答案 0 :(得分:0)

我很确定你不能一次选择多个字符串。您可以突出显示或以其他方式更改两个字符串的外观,但我认为您所指的“鼠标”字符串选择函数本身就是一个字符串 - 即使您以编程方式执行此操作也是如此。有些方法可以引用“选定的”文本,如果有多个方法,我不知道它们是如何工作的。

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

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