Javascript 在定位标记中嵌套可单击组件

假设我有一个很大的DIV，里面有很多内容

内容是动态的，可以是任何内容，还可以包括不同类型的可点击组件——按钮、视频、链接等

我需要DIV本身是可点击的，并路由到某个URL，但同时我需要不同类型的可点击组件也是可用的。如果您按下其中任何一个按钮，它都不应该在DIV级别调用路由

我尝试过不同的方法，但似乎都不管用：

用一个标签包装整个DIV——在DIV内的任何单击都将路由到URL，并且所有可单击的组件都将不可用。此外，这可以防止在该DIV中有其他A标记，因为您不能嵌套A标记

将onclick事件添加到DIV并相应地进行路由-这解决了标记嵌套问题，但同样没有可单击的组件可用

我能看到的唯一合理的解决方案是处理所有可单击组件上的单击事件，并对附加的事件执行stopPropagation，这样它就不会冒泡到DIV

但是，这个解决方案对我来说是不可行的，因为在DIV中可能有一些组件不在我的控制之下，比如内容和功能未知的iframe、视频控件等等

我有没有其他方法可以使用，但我没有

更新：

我继续管理不同组件上的单击事件和停止连接

在标签上，它工作得很好

但是当我有一个带有不同控制按钮的视频元素时，我试着将它包装在一个div中，并在该div上停止连接，但它似乎不起作用，不知道为什么

更新2:

这一分钟变得越来越奇怪

因此，我通过在包装分区添加StopRopegation和preventDefault解决了视频元素单击问题。我不知道为什么需要使用preventDefault。毫无意义

现在我面临另一个组件的不同问题。我有一个引导旋转木马，我正在用一个DIV包装它，并试图阻止该DIV上的单击事件，还试图添加默认值。当我在那个DIV上停止连接时，转盘按钮停止工作

如果您能提供一些帮助和解释，我们将不胜感激

更新3:

我想我可以在事件上使用defaultPrevented值，以确定是否在主DIV元素上执行路由

我用一个带有ui sref属性的A标记包装了我的主div（忘记提到这是一个角度应用程序…），并绑定到ng click事件

但由于某种原因（似乎与ui sref有关），jQuery的IsDefaultPrevented总是返回true

因此，我用DIV替换了A标记，并在检查IsDefaultPrevented值后在控制器内部执行状态更改

---

所以现在一切都在起作用。但我真的不知道为什么。

看看我的代码；希望这能解决你的问题

是这样考虑的：

<div id="div1" style="width:50px;height:50px;background-color:red">

         <a href="#">Hello</a>

</div>

---

现在如果你点击“你好”；只会显示“在1级a”警报。

谢谢。这与我目前正在做的类似。但是正如我在第二次更新中所描述的那样，stopPropagation会把事情搞砸

$(document).ready(function(){

    $("#div1").click(function(){
        alert("on div1");
    })

    $("#div1 a").click(function(e){
        e.stopPropagation();
        alert("on div1 a");
    })
})