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修改.text-cell-area，以使其偏移量和尺寸完全覆盖我需要检查其对齐方式的所有文本。它基本上是一个漂浮在几行表格上的盒子。

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

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

我需要的是一种允许用户在两个divs下选择文本的不同方法。我该怎么办？

最佳答案

通过用标签类将td内容包装在span中，然后将position:relative和z-index:50添加到我的span CSS属性（position attributes must be included for z-index to take effect）中，解决了我的问题。我在与突出显示相关的z-index中添加了小于跨度的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
      }
    });
  };
});

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