在Anchor标记中嵌套可点击组件

Question

假设我有一些内容很大的DIV。

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

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

我尝试了不同的方法，似乎没有工作：

1. 用A标签包裹整个DIV - DIV内的任何点击都将路由到URL，并且所有可点击组件都不可用。 此外，这可以防止在DIV中包含其他A标签，因为您无法嵌套A标签
2. 将一个onclick事件添加到DIV并相应地路由 - 这解决了A标记嵌套问题，但是再次没有可点击的组件可用。

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

但是，这个解决方案对我来说是不可行的，因为在DIV内部可能存在不受我控制的组件，例如具有未知内容和功能的iframe，视频控件等。

是否有一种我可以使用的不同方法，我错过了？

更新：

我继续管理不同组件上的click事件和stopPropegation。

在A标签上它很棒。

但是当我有一个带有不同控制按钮的视频元素时，我试图将它包装在div和stopPropegation上的DIV上，但它似乎不起作用，不知道为什么。

更新2：

这一刻变得更加怪异......

所以我通过在包装DIV中添加stopPropegation和preventDefault解决了视频元素点击。 我不知道为什么我需要使用preventDefault。 没有意义。

现在我面临另一个组件的另一个问题。 我有一个Bootstrap轮播，我用DIV包装它并尝试停止对该DIV上的点击事件进行调试，同时尝试添加preventDefault。 当我在那个DIV上停止调试时，旋转木马按钮停止运作！？

一些帮助和解释将不胜感激..

更新3：

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

我用一个带有ui-sref属性的A标签包裹了我的主div（忘了提到这是一个Angular应用程序..），并绑定到ng-click事件。

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

所以我用DIV替换了A标签，并在检查了IsDefaultPrevented值后在控制器内执行了状态更改。

所以现在一切正常。 但我不确定为什么。

Answer 1

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

html被认为是这样的：

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

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

</div>

js代码就像;

$(document).ready(function(){

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

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

现在，如果你点击“你好”; 只有“在div1上”的警告才会显示。