jQuery/JavaScript에서 요소 간의 충돌을 감지하는 방법은 무엇입니까?

jQuery/JavaScript 충돌 감지

겹치는 요소 식별

두 요소가 겹쳤을 때를 아는 것은 다양한 대화형 웹 애플리케이션에 필수적입니다. 두 개의 색상 상자가 그리드에서 수직으로 이동하는 간단한 게임을 상상해 보십시오. 빨간색 상자가 다른 상자와 충돌했는지 확인하려면 다음 jQuery/JavaScript 솔루션을 사용할 수 있습니다.

Function Breakdown

getPositions: 위치를 검색합니다. 및 요소의 크기.

comparePositions: 주어진 두 위치의 범위를 비교하고 두 위치가 겹치거나 닿으면 true를 반환합니다.

overlaps: 주요 기능은 두 요소 사이의 중첩을 확인합니다. getPositions 및 comparePositions를 사용하여 축이 겹치는지 확인합니다.

구현

1. 겹침 클로저로서의 기능.
검사 중인 두 요소의 위치를 ​​가져옵니다.
3. comparePositions를 사용하여 두 요소의 가로 및 세로 범위를 비교합니다.
범위가 겹치는 경우 true를 반환합니다.

예

HTML 구조를 고려하세요:

<div>

그리고 해당 JavaScript:

var overlaps = (function () {
  // ... same as before ...
})();

$(function () {
  var area = $('#area')[0],
      box = $('#box0')[0],
      html;

  html = $('#area').children().not(box).map(function (i) {
    return '<p>Red box + Box ' + (i + 1) + ' = ' + overlaps(box, this) + '</p>';
  }).get().join('');

  $('body').append(html);
});

이 스크립트는 빨간색 상자가 다른 상자와 겹치는지 여부를 나타내는 메시지를 페이지에 추가합니다.

위 내용은 jQuery/JavaScript에서 요소 간의 충돌을 감지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!