Php 重叠onclick元素html

我有一个跨度内的跨度和两个onclick函数。但是，当我单击“内部跨距”时，它的运行方式与单击“外部跨距”时的运行方式相同

<article onclick="location='/Code1.php?'" >
    <!--Run Code1.php-->            
    <span onclick="location='/Code2.php'"  >
        <!--Run Code2.php-->
    </span>
    <!--Run Code1.php-->
</article>

无论我点击Code1.php还是Code2.php，它都会运行Code1.php。文章和span是重叠的，所以点击span也被认为是点击文章

---

Code2.php应该在点击span时执行，Code1.php应该在点击文章时执行，文章中span部分除外。

您可以添加点击事件处理程序，因为您还需要在HTML中看到更改，我将

onclick

更改为

data onclick

。。。

var elements=document.querySelectorAll（'.xxx'）；
elements.forEach（函数（元素）{
元素。addEventListener（'click'，函数（事件）{
event.stopPropagation（）；//这是必需的，否则如果单击Run Code2.php，它也将运行code1.php
console.log（'clicked one'，this.getAttribute（'data-onclick'）；
//现在您可以跟随链接，只需取消注释下一行
//window.location.href=this.getAttribute（'data-onclick'）；
});
});
.xxx{
利润率：10px；
填充：10px；
边框：实心4px绿色；
背景颜色：橙色；
光标：指针；
}

运行Code1.php
运行Code2.php
运行Code1.php
您可能想调查事件冒泡-这可能有用，或者它不起作用，甚至没有进入元素中。forEach（函数（元素）。我对jq+不太了解。我现在甚至没有在window.location.href中获得正确的链接，我将如何打开该文件Code1.php