javascript - 在 anchor 标记中嵌套可点击组件

Question

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

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

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

我尝试了不同的方法，但似乎都行不通:

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

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

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

是否可以使用我缺少的其他方法？

更新:

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

在 A 标签上效果很好。

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

更新 2:

这越来越奇怪了......

因此，我通过在包装 DIV 中同时添加 stopPropegation 和 preventDefault 来解决视频元素点击问题。我不知道为什么我需要使用 preventDefault。没有意义。

现在我面临另一个组件的不同问题。我有一个 Bootstrap 旋转木马，我用 DIV 包装它并尝试停止对该 DIV 上的单击事件的 stopPropegation，还尝试添加 preventDefault。当我在那个 DIV 上停止传播时，旋转木马按钮停止工作!？

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

更新 3:

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

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

但由于某些原因(似乎与 ui-sref 有关)，jQuery 的 IsDefaultPrevented 始终返回 true。

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

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

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");
    })
})

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