Question

好，所以我尝试了另一个问题中的一件事，它确实起作用了，但不是我想要的那样。它没有按照我想要的方式工作！当有人触摸两个对象时，您必须按一下才能单击，这样它就会提醒您，如果有人可以找到一种方法来检测两个元素是否在触摸而无需单击，那将是一种救生器！因此，希望您阅读此请求的人如果知道如何请回复。这是下面的代码。所以有一个物体在移动，我希望它在物体碰到玩家时停止（我正在做一个游戏），移动是由px ....我希望它继续测试是否有一个物体碰到了玩家，以及是否我要它停止一切吗？

var boxes = document.querySelectorAll('.box');

boxes.forEach(function (el) {
  if (el.addEventListener) {
      el.addEventListener('click', clickHandler);
  } else {
      el.attachEvent('onclick', clickHandler);
  }
})

var detectOverlap = (function () {
    function getPositions(elem) {
        var pos = elem.getBoundingClientRect();
        return [[pos.left, pos.right], [pos.top, pos.bottom]];
    }

    function comparePositions(p1, p2) {
        var r1, r2;
        if (p1[0] < p2[0]) {
          r1 = p1;
          r2 = p2;
        } else {
          r1 = p2;
          r2 = 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 clickHandler(e) {

    var elem     = e.target,
        elems    = document.querySelectorAll('.box'),
        elemList = Array.prototype.slice.call(elems),
        within   = elemList.indexOf(elem),
        touching = [];
    if (within !== -1) {
        elemList.splice(within, 1);
    }
    for (var i = 0; i < elemList.length; i++) {
        if (detectOverlap(elem, elemList[i])) {
            touching.push(elemList[i].id);
        }
    }
    if (touching.length) {
        console.log(elem.id + ' touches ' + touching.join(' and ') + '.');
        alert(elem.id + ' touches ' + touching.join(' and ') + '.');
    } else {
        console.log(elem.id + ' touches nothing.');
        alert(elem.id + ' touches nothing.');
    }

}

这是我现在的视频游戏（请不要复制）

<!DOCTYPE html>
/
<html>
  <form id="player" class="box">
  </form>
  <button type="button" class="up" onclick="moveup()">^</button>
  <button type="button" class="down" onclick="movedown()">v
  </button>
<style src="style.css">
    #player {
width: 300px;
height: 100px;
background-color: blue;
 display: inline-block;
position: relative;
bottom: -250px;
left: 200px;


}
 .up {
 position: relative; 
 bottom: -400px;
  




 }
 .down {
 position: relative; 
 bottom: -420px;
 



 }
 body {
 background-color: black;



 }
 #car {
 width: 300px;
height: 100px;
background-color: red;
 display: inline-block;
position: relative;
bottom: -250px;
left: 600px;


 }
  </style>
  <form id="car" class="box"></form>
  <script>
  imgObj = document.getElementById('player');
imgObj.style.position= 'relative'; 
imgObj.style.bottom = '-250px'; 


function moveup() {
  imgObj.style.position= 'relative'; 
imgObj.style.bottom = '-250px'; 
  imgObj.style.bottom = parseInt(imgObj.style.bottom) + 70 + 'px';




}
function movedown() {
  imgObj.style.position= 'relative'; 
imgObj.style.bottom = '-250px'; 

 imgObj.style.bottom = parseInt(imgObj.style.bottom) + -120 + 'px';



}
myMove();
function myMove() {
  var elem = document.getElementById("car");   
  var pos = 0;
  var id = setInterval(frame, 5);
  function frame() {
    if (pos == 1000) {
      clearInterval(id);
      myMove();
    } else {
      pos++; 
      elem.style.left = pos + "px"; 
      elem.style.left = pos + "px"; 
  }
  }
  }
/* please do not copy; this is it so far i want the red box when it hits the player(blue box) to stop everything that is happening */
/* made by Jsscripter; car game */
  
 </script>
   </html>

Answer 1

路口观察员。 API的开发主要是由于新闻源和无限滚动。目标是解决什么时候出现的问题，加载内容。也非常适合游戏。

Intersection Observer API使代码可以注册回调函数   每当他们希望监视的元素进入或执行时执行   退出另一个元素（或视口），或   这两个相交的变化是请求的数量。这样，网站没有   不再需要在主线程上执行任何操作来监视这种情况   元素交集，浏览器可以自由优化   合理的交叉口管理。

https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

除野生动物园外，所有主要浏览器均支持API。为了向后兼容和Safari支持，可以使用W3C的here中的polyfill。从MDN中查看以下示例：

var callback = function(entries, observer) { 
  entries.forEach(entry => {
    // Each entry describes an intersection change for one observed
    // target element:
    //   entry.boundingClientRect
    //   entry.intersectionRatio
    //   entry.intersectionRect
    //   entry.isIntersecting
    //   entry.rootBounds
    //   entry.target
    //   entry.time
  });
};

var options = {
  root: document.querySelector('#scrollArea'),
  rootMargin: '0px',
  threshold: 1.0
}

var observer = new IntersectionObserver(callback, options);

var target = document.querySelector('#listItem');

observer.observe(target);

在此处查看此操作：https://codepen.io/anon/pen/OqpeMV

我如何查看一个元素是否在JavaScript中触摸另一个元素而不单击任何东西

1 个答案: