JavaScript 및 브라우저 API를 사용하여 텍스트 블록 내에서 어떤 단어가 클릭되었는지 어떻게 감지할 수 있나요?

JavaScript 및 브라우저 API를 사용하여 텍스트에서 클릭한 단어 감지

문제는 웹페이지의 텍스트 내에서 어떤 단어가 클릭되었는지 감지하고 변수에 저장합니다. 이전 솔루션에서는 각 단어에 개별 클래스 요소를 추가하고 jQuery를 사용하여 클릭을 캡처했지만 비효율적이고 시각적으로 매력적이지 않은 것으로 나타났습니다.

향상된 JavaScript 솔루션

더 효율적인 솔루션 솔루션은 브라우저 선택 기능을 활용합니다.

1. 와 같이 클릭 가능한 텍스트가 있는 요소에 대한 클래스를 정의합니다.

2. JavaScript를 사용하여 이 클래스에 대한 클릭을 캡처합니다. :

<code class="javascript">$(".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 &&
    range.toString().trim() != ""
  );

  // Alert result
  var str = range.toString().trim();
  alert(str);
});</code>

브라우저 API 솔루션

JavaScript만으로는 충분하지 않은 경우 브라우저 API 활용을 고려하세요.

• 문서 개체 모델(DOM): 텍스트 노드를 포함한 HTML 요소에 액세스하고 조작합니다.
• ElementFromPoint() 메서드: 페이지의 지정된 좌표에서 요소를 검색하여 다음을 허용합니다. 클릭한 단어를 식별할 수 있습니다.
• 포인터 이벤트 API: 특정 요소에 대한 포인터 이벤트(예: 클릭)를 모니터링하여 클릭한 위치에 대한 자세한 정보를 제공합니다.

브라우저 확장으로 기능 확장

필요한 경우 브라우저 확장을 개발하여 기능을 향상할 수 있습니다.

• 콘텐츠 스크립트: 웹 페이지에 JavaScript를 삽입하여 특정 요소에 대한 클릭을 모니터링합니다.
• 이벤트 리스너: 이벤트 핸들러를 할당하여 클릭과 같은 사용자 작업을 감지합니다.
• API 통합: 위에서 언급한 것과 같은 브라우저 API를 활용하여 웹페이지 요소에 액세스하고 조작합니다.

JavaScript와 브라우저 API를 결합하면 다음과 같은 사용자 친화적인 인터페이스를 효과적으로 만들 수 있습니다. 사용자는 텍스트 내의 단어를 클릭하고 클릭한 단어를 변수에 저장할 수 있습니다.

위 내용은 JavaScript 및 브라우저 API를 사용하여 텍스트 블록 내에서 어떤 단어가 클릭되었는지 어떻게 감지할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!