성능 저하 없이 텍스트에서 클릭한 단어를 효율적으로 감지하는 방법은 무엇입니까?

구체적으로 클릭한 단어 감지

텍스트와의 사용자 상호 작용을 향상시키기 위해 사용자가 클릭하는 단어를 감지해야 할 필요성이 대두되었습니다. 이 문제를 해결하기 위해 한 가지 솔루션은 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 문서에서 "클릭 가능" 클래스로 텍스트 블록을 식별합니다.

<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!