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

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 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，使其偏移量和尺寸完全覆盖我需要检查其对齐方式的所有文本；它基本上是一个漂浮在多个表格行上的框。

Mouseover 事件和 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 )。我在与突出显示相关的 div 中添加了低于 span 的 z-index。这允许我的用户选择跨度中的文本。

$(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
      }
    });
  };
});
                  

.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;
}

<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>

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