如何在不犧牲表現的情況下有效檢測文字中點擊的單字？

透過最佳化偵測點擊的單字

為了增強使用者與文字的交互，需要偵測使用者點擊的單字。為了解決這個問題，解決方案涉及使用 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中文網其他相關文章！