Question

我正在尝试编写一个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 class="text-cell-area">
        <div class="highlighter"></div>
    </div>
    <table>
        <tr><td>text</td></tr>
        <tr><td>text</td></tr>
    </table>
</div>

在页面加载时，我使用JavaScript修改.text-cell-area，使其偏移量和尺寸完全覆盖我需要检查其对齐的所有文本;它基本上是一个漂浮在几个表行上的盒子。

鼠标悬停事件和window.onmousemove跟踪用户的光标，设置.highlighter的位置以匹配用户光标的位置，并捕捉到每个等宽字符。

此功能很好 - 对齐检查工作正常。问题是我现在有两个div覆盖在我的表中的文本，所以我不能选择它。我无法使用pointer-events: none;允许我的用户选择文本，因为这可以防止鼠标悬停事件跟踪用户的光标以设置突出显示div的位置。

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

Answer 1

我解决了我的问题，将td内容包含在span个带有标签类的内容中，然后将position:relative和z-index:50添加到我的span CSS属性中（position attributes must be included for z-index to take effect）。我将z-index es低于跨度的div添加到与突出显示相关的$(document).ready(function() { window.onresize = function() { $(".text-area").css({ left: $(".alignment-text").first().offset().left, top: $(".alignment-text").first().offset().top, width: (function() { var widest = 0; $(".alignment-text").each(function(index, element) { if($(element).width() > widest) widest = $(element).width(); }); return widest; })(), height: (function() { return ($(".alignment-text").last().offset().top + $(".alignment-text").last().height()) - $(".alignment-text").first().offset().top })() }); }; $(window).trigger("resize"); $(".text-area").mouseenter(function() { $(".highlighter").css("opacity", ".5"); }); $(".text-area").mouseleave(function() { $(".highlighter").css("opacity", "0"); }); $(".alignment-text").mouseenter(function() { $(".text-area").trigger("mouseenter"); }); $(".alignment-text").mouseleave(function() { $(".text-area").trigger("mouseleave"); }); window.onmousemove = function(e) { $(".highlighter").css({ left: function() { return e.pageX - $(".text-area").offset().left - $(".highlighter").width()/2 } }); }; });中。这允许我的用户选择跨度中的文本。

＆＃13;

.alignment-text {
  position: relative;
  z-index: 2;
}

.alignment-text, .highlighter-spacer {
  font-family: Fixed, monospace;
}

.highlighter-spacer {
  opacity: 0;
}

.highlighter {
  height: 100%;
  position: absolute;
  background-color: blue;
  opacity: 0;
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
  z-index: 3;
}

.text-area {
  z-index: 0;
  position: absolute;
  overflow: hidden;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text-area">
  <span class="highlighter">
    <span class="highlighter-spacer">A</span>
  </div>
</div>
<table>
  <tr>
    <th>Row name</th>
    <th>Text we need to see aligned!</th>
  </tr>
  <tr>
    <td>First row!</td>
    <td class="alignment-text">This is some text. It should line up at some point with the text beneath it.</td>
  </tr>
  <tr>
    <td>Second row!</td>
    <td class="alignment-text">Here's some more text. I hope it lines up okay.</td>
  </tr>
</table>

＆＃13;

div

＆＃13;

但是，它还阻止了mouseenter上的鼠标事件，因为它们现在位于文本下方。为了解决这个问题，我在mouseleave上为.td-contents和.text-cell-area设置了事件处理程序，以便在包装器div {{1}}中触发它们各自的对应项。用户现在可以选择文本并查看行之间文本的对齐方式。

允许通过div选择，但仍然跟踪鼠标

1 个答案: