Javascript 允许通过div进行选择，但仍跟踪鼠标

我正试图编写一个JavaScript工具，让我的用户能够比较略有不同的文本字符串中的字符范围。用户仍然能够选择该文本是至关重要的

# || is a section my tool highlights. The number of characters the highlight covers starts at one, but can be varied by text selection. 

Foo |Bar Baz Quux|
Foo |Bra Biz Quix|

目前，div包含一个表。第二个div位于第一个div内，第三个div位于第二个div内

第二个div覆盖在表中的文本上，而第三个div实际上在用户想要检查的文本上显示为半透明

<div>
    <div class="text-cell-area">
        <div class="highlighter"></div>
    </div>
    <table>
        <tr><td>text</td></tr>
        <tr><td>text</td></tr>
    </table>
</div>

文本
文本

在页面加载时，我使用JavaScript修改

。文本单元格区域

，使其偏移量和尺寸完全覆盖我需要检查对齐的所有文本；它基本上是一个浮动在几行桌子上的盒子

Mouseover events和window.onmousemove跟踪用户光标，设置

.highlighter

的位置以匹配用户光标的位置并捕捉到每个单间隔字符

这个功能很好，对齐检查工作得很好。问题是我现在有两个div覆盖在表中的文本上，所以我无法选择它。我不能使用

指针事件：无

允许我的用户选择文本，因为这会阻止mouseover事件跟踪用户的光标以设置突出显示div的位置

---

我需要的是一种不同的方式，允许我的用户选择两个div下面的文本。我该怎么做呢？

我解决了我的问题，用一个标签类将我的

td

内容包装在

span

s中，然后将

position:relative

和

z-index:50

添加到我的

span

CSS属性（）。我在突出显示相关的

div

s中添加了低于跨度的

z索引。这允许我的用户选择跨距中的文本


$（文档）.ready（函数（）{
window.onresize=函数（）{
$（“.text区域”）.css({
左：$（“.alignment text”）.first（）.offset（）.left，
顶部：$（“.alignment text”）.first（）.offset（）.top，
宽度：（函数（）{
var最宽=0；
$（“.alignment text”）。每个（函数（索引、元素）{
if（$（元素）.width（）>widtest）widtest=$（元素）.width（）；
});
返回最宽；
})(),
高度：（函数（）{
返回（$（“.alignment text”）.last（）.offset（）.top+$（“.alignment text”）.last（）.height（））-$（“.alignment text”）.first（）.offset（）.top
})()
});
};
$（窗口）。触发器（“调整大小”）；
$（“.text区域”）.mouseenter（函数（）{
$（“.highlighter”）.css（“不透明度”，“.5”）；
});
$（“.text区域”）.mouseleave（函数（）{
$（“.highlighter”）.css（“不透明度”，“0”）；
});
$（“.alignment text”）.mouseenter（函数（）{
$（“.text区域”）.trigger（“鼠标指针”）；
});
$（“.alignment text”）.mouseleave（函数（）{
$（“.text区域”）.trigger（“mouseleave”）；
});
window.onmousemove=函数（e）{
$（“.highlighter”）.css({
左：函数（）{
返回e.pageX-$（“.text area”）.offset（）.left-$（“.highlighter”）.width（）/2
}
});
};
});

。对齐文本{
位置：相对位置；
z指数：2；
}
.对齐文字，.荧光笔间隔符{
字体系列：固定，单空格；
}
.荧光笔垫片{
不透明度：0；
}
.荧光灯{
身高：100%；
位置：绝对位置；
背景颜色：蓝色；
不透明度：0；
过渡：不透明度。25秒缓进缓出；
-moz过渡：不透明度。25秒缓进缓出；
-webkit过渡：不透明度。25秒易入易出；
z指数：3；
}
.文本区{
z指数：0；
位置：绝对位置；
溢出：隐藏；
}

A.
行名称
文本我们需要看到对齐！
第一排！
这是一些文本。它应该在某个点与下面的文本对齐。
第二排！
这里有更多的文字。我希望它排好。
该答案可能与我需要的答案相似，但我必须更进一步，找到如何发送底层TDs my click事件，以便他们知道用户正在选择文本。我采用了与链接问题中类似的方法，现在可以将
mousedown
和
mouseup
事件发送到我的辅助
div
s下方的
td
s。问题是这些事件根本不会触发任何选择。我需要知道如何调用与用户开始和结束单击
td
s的位置相对应的选择。