首頁 > web前端 > js教程 > 如何在不犧牲表現的情況下有效檢測文字中點擊的單字?

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

Patricia Arquette
發布: 2024-10-26 15:49:03
原創
932 人瀏覽過

How to Efficiently Detect Clicked Words in Text Without Sacrificing Performance?

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

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

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板