如何偵測 jQuery/JavaScript 中元素之間的衝突？

jQuery/JavaScript 衝突偵測

辨識重疊元素

了解兩個元素何時重疊對於各種互動式Web 應用程式至關重要。想像一個簡單的遊戲，其中兩個彩色盒子在網格上垂直移動。要確定紅色框是否與任何其他框發生碰撞，您可以使用以下jQuery/JavaScript 解決方案：

函數分解

getPositions: 檢索位置和元素的尺寸。

comparePositions: 比較兩個給定位置的範圍，如果它們重疊或接觸，則傳回 true。

overlaps:主要功能檢查兩個元素之間的重疊。它使用 getPositions 和 comparePositions 來確定它們的任何軸是否重疊。

實作

1. 定義 重疊 用作閉包。
2. 取得正在檢查的兩個元素的位置。
3. 使用 comparePositions 比較兩個元素的水平和垂直範圍。
4. 如果任何範圍重疊，則傳回 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中文網其他相關文章！