如何检测 jQuery/JavaScript 中元素之间的冲突？

jQuery/JavaScript 冲突检测

识别重叠元素

了解两个元素何时重叠对于各种交互式 Web 应用程序至关重要。想象一个简单的游戏，其中两个彩色盒子在网格上垂直移动。要确定红色框是否与任何其他框发生碰撞，您可以使用以下 jQuery/JavaScript 解决方案：

函数分解

getPositions: 检索位置和尺寸element.

comparePositions: 比较两个给定位置的范围，如果重叠或接触则返回 true。

overlaps: main 函数检查用于两个元素之间的重叠。它使用 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中文网其他相关文章！