Question

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

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

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

我尝试了不同的方法，似乎都没有效果：

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

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

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

我可以使用不同的方法吗？

更新

我继续管理不同组件的点击事件和停止推广。

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

现在，如果你点击＆＃34;你好＆＃34; ;只有＆＃34;在div1 a＆＃34;警报会显示。

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

1 个答案: