var overlaps = (function () { function getPositions( elem ) { var pos, width, height; pos = $( elem ).position(); width = $( elem ).width(); height = $( elem ).height(); return [ [ pos.left, pos.left + width ], [ pos.top, pos.top + height ] ]; } function comparePositions( p1, p2 ) { var r1, r2; r1 = p1[0] < p2[0] ? p1 : p2; r2 = p1[0] < p2[0] ? p2 : p1; return r1[1] > r2[0] || r1[0] === r2[0]; } return function ( a, b ) { var pos1 = getPositions( a ), pos2 = getPositions( b ); return comparePositions( pos1[0], pos2[0] ) && comparePositions( pos1[1], pos2[1] ); };})();$(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 );});body { padding: 30px; color: #444; font-family: Arial, sans-serif;}h1 { font-size: 24px; margin-bottom: 20px;}#area { border: 2px solid gray; width: 500px; height: 400px; position: relative;}#area > div { background-color: rgba(122, 122, 122, 0.3); position: absolute; text-align: center; font-size: 50px; width: 60px; height: 60px;}#box0 { background-color: rgba(255, 0, 0, 0.5) !important; top: 150px; left: 150px;}#box1 { top: 260px; left: 50px;}#box2 { top: 110px; left: 160px;}#box3 { top: 200px; left: 200px;}#box4 { top: 50px; left: 400px;}p { margin: 5px 0;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><h1>Detect overlapping with Javascript</h1><div id="area"> <div id="box0"></div> <div id="box1">1</div> <div id="box2">2</div> <div id="box3">3</div> <div id="box4">4</div></div>一般思路-获得框的偏移量和尺寸，并检查它们是否重叠。
如果要更新，可以使用
setInterval：
function detectOverlapping() { // pre that detects if the box overlaps with a moving box setInterval(detectOverlapping, 25);}detectOverlapping();另外，请注意，您可以针对特定示例优化功能。
因为它们是固定的，所以您不必重复读取框的尺寸（就像我在代码中一样）。您可以在页面加载时读取它们（将其读取到变量中），然后仅读取变量
小盒子的水平位置不会改变（除非用户调整窗口大小）。轿厢的垂直位置不变。因此，这些值也不必重复读取，也可以存储到变量中。
您无需测试小盒子是否始终与所有汽车盒子重叠。您可以-基于其垂直位置-确定当前箱子在哪个车道上，并仅从该车道测试特定的汽车箱子。
