改进建议: 选择内容前先判断光标是否在选区内

ficapy commented 2 years ago

感谢作者，这是一个很好用的插件，我计划把它和https://github.com/mechatroner/word-discoverer 混合起来使用(划过特定单词的时候直接跳出单词释义，不需要按shift)

我对代码变更后发现，有的时候光标不在单词上面，它也会触发词典显示，所以我添加了一个判断逻辑主要代码如下 https://codesandbox.io/s/compassionate-mirzakhani-7gfzsn?file=/src/index.js:1976-2003

  rectContainsPoint(rect) {
    let { x, y, width, height } = rect;
    return (
      this.x >= x && this.x <= x + width && this.y >= y && this.y <= y + height
    );
  }

  selectText() {
    this.setWordRange();
    const selection = window.getSelection();
    // 这里应该先判断当前光标是否在选区范围内
    if (this.rectContainsPoint(this.rng.getBoundingClientRect())) {
      selection.removeAllRanges();
      selection.addRange(this.rng);
    }
  }

假设一个p标签里面存在一个br标签，即可观察到此现象

另外，我自己添加了对特定dom元素的自动显示，可以提交PR吗 word-discoverer会对每个单词添加类似这样的标签

<wdautohl-customtag style="font:inherit;display:inline;color:inherit;background-color:inherit;" id="wdautohl_id_279" class="wdautohl_none_none">word</wdautohl-customtag>

ninja33 commented 2 years ago

现在shift也不是必须的吧？鼠标选中特定的单词就可以了。shift一般是为了不方便点选鼠标的情况下，比如按钮和链接，点选鼠标就触发了。其他情况直接鼠标选择就可以了

ficapy commented 2 years ago

我改成了这样，部分情况划过就能显示，不需要点击 ODH_demo

ninja33 / ODH

改进建议: 选择内容前先判断光标是否在选区内 #245