Javascript 试图阻止SVG上的点击

各位下午好

我对编码游戏还不熟悉，并且已经学习过蚱蜢教程

在那里的沙箱环境中，我试图用JavaScript中的SVG编写一个简单的“保持状态”游戏

我有一个背景SVG和一个球SVG

我已经给出了这两个参数

背景SVG将球重置为随机cX位置，cY位置为35

球SVG应以随机cX将球传输回cY 35，以随机cX将球传输回cY 1000

当球被点击时，它会点击背景并中断动画，并立即将其返回cY 35和随机cX

如何防止点击

我尝试过各种随机的测试，但都无法成功

非常感谢,， 遮阳棚645

按要求编辑； PosistionX只是一个数组，其中包含各种数字来表示cX

var ball = svg.append(‘circle’).attr(‘fill’,’white’).attr(‘r’,25).attr(‘cY’,’35).attr(‘cX’, PickRandom(PosistionX));

var background =svg.append(‘rect’).attr(‘fill’,’green’).attr(‘height’,’1000’).attr(‘width’,’1000’).attr(‘cY’,’0’).attr(‘cX’,’0’);

function kickBall () {
ball.on(‘click’, () => {
    ball.transistion().attr(‘cY’,’35’).attr(‘cX’,’PickRandom(PosistionX)).duration(3000);

ball.transistion().attr(‘cY’,’1000’).attr(‘cX’,’PickRandom(PosistionX)).duration(3000);
});

编辑2

我增加了球的大小，并减慢了动画。我发现球现在显然没有复位，但在第一次转换时没有上升。而不是直接降落到新的PosistionX

---

编辑3；为了澄清这一点，现在看来这个问题不是点击问题，只是原始圆圈SVG上的“点击框”太差了。但是，如果有人有任何建议，新的.transistion问题仍然是一个问题。

您需要执行

事件委派。在两个SVG的父级上设置一个事件，然后使用
e.target
检查事件是从哪个元素发生的，并相应地编写逻辑

像这样的：（只是讲逻辑）

HTML:

<div class="wrapper">
  <div class="svg1" id="svg1">SVG1</div>
  <div class="svg2" id="svg2">SVG2</div>
</div>

document.querySelector(".wrapper").addEventListener("click",(e)=>{
   if(event.target.id==="svg1"){
      // SVG1 logic here
   }

   if(event.target.id==="svg2"){
      // SVG2 logic here
   }
});

注意：因此，我们的想法是，一旦在包装器中发生单击，无论是来自
svg1
还是
svg2
，我们首先从哪个元素交叉检查触发的事件。对于该元素，根据我们的要求设置代码
e.target.id
帮助我们知道事件从哪个元素冒泡。

let background=document.getElementById（'background'）；
让ball=document.getElementById（'ball'）；
document.addEventListener（'单击'，（e）=>{
if（例如，目标最近（“#背景”））{
ball.style.top='0px'；
ball.style.left='0px'；
}else if（例如，目标最近（“#ball”））{
ball.style.top=（Math.random（）*100）+“px”；
ball.style.left=（Math.random（）*100）+px'；
}
});
svg{
位置：绝对位置；
}

在球的点击处理程序中，对事件调用
.stopPropagation（）
。我假设我受到使用蚱蜢的限制，因为在引用球或.on事件时，我在任何可能的选项下都找不到.stopPropagation（）。请编辑问题以包含一个。只有两个形状，而不是整个游戏。请将设置球点击事件的代码添加到您的问题中。当你处理背景点击时，你也可以检查cY是否已经35岁，在这种情况下什么也不做。请参阅编辑，包括我设置的球和背景变量以及球。在handlerHi Imran上，有几个问题是你的答案。“文档”是字符串吗？另外，我认为我使用grasshopper作为.querySelector是有限制的。还有其他想法吗？嗨，夏图645。document是一个javascript dom对象，用于访问dom中的元素。我们可以说document对象代表您的网页，一旦加载到browserHi，请使用、推荐或链接到w3schoolsDon't send newbies:）并请删除此处的注释链接，此处的反向链接对他们有好处。完成：）明白您的意思：）