如何在不牺牲性能的情况下有效检测文本中点击的单词？

通过优化检测点击的单词

为了增强用户与文本的交互，需要检测用户点击的单词。为了解决这个问题，一种解决方案涉及使用 jQuery 进行广泛的类解析，从而产生缓慢且视觉上不吸引人的用户体验。为了寻求更优雅的方法，让我们深入研究改进的解决方案。

以下 JavaScript 代码提供了一种简化的方法来实现单词检测，而不会因不必要的跨度而使文档混乱：

<code class="js">$(".clickable").click(function(e){
         s = window.getSelection();
         var range = s.getRangeAt(0);
         var node = s.anchorNode;
         
         // Find starting point
         while(range.toString().indexOf(' ') != 0) {                 
            range.setStart(node,(range.startOffset -1));
         }
         range.setStart(node, range.startOffset +1);
         
         // Find ending point
         do{
           range.setEnd(node,range.endOffset + 1);

        }while(range.toString().indexOf(' ') == -1 &amp;&amp; range.toString().trim() != '');
        
        // Alert result
        var str = range.toString().trim();
        alert(str);
       });</code>

在HTML 文档，用“clickable”类标识文本块：

<code class="html"><p class="clickable">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris rutrum ante nunc. Proin sit amet sem purus. Aliquam malesuada egestas metus, vel ornare purus sollicitudin at. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer porta turpis ut mi pharetra rhoncus. Ut accumsan, leo quis hendrerit luctus, purus nunc suscipit libero, sit amet lacinia turpis neque gravida sapien. Nulla facilisis neque sit amet lacus ornare consectetur non ac massa. In purus quam, imperdiet eget tempor eu, consectetur eget turpis. Curabitur mauris neque, venenatis a sollicitudin consectetur, hendrerit in arcu.
</p></code>

使用此代码，您可以检测页面任何部分上的单击单词，这提供了更自然的用户交互，而不会影响性能.

以上是如何在不牺牲性能的情况下有效检测文本中点击的单词？的详细内容。更多信息请关注PHP中文网其他相关文章！