Onclick 不同的 DIV 标签答案

【问题标题】：Onclick on different DIV tagsOnclick 不同的 DIV 标签
【发布时间】：2014-02-11 19:14:45
【问题描述】：

我有两个 DIV 标签。 1) 绿色是外部 Div 标签，其 onclick 属性设置为 alert('Clicked')。 2）黄色是内部DIV标签

现在，当我点击内部 div 标签时，会弹出一个警报。从内部 div 标签中选择项目时相同的重复。我无法在内部 div 标签中进行选择。如何解决？

此外，我将嵌套动态生成的 div 标签。我被困在这里了

【问题讨论】：

发布您的代码将使我们更容易理解您的问题

标签： javascript php jquery html

【解决方案1】：

您需要防止您的点击传播到外部 div。

很抱歉重新发布，但答案已经位于： event.preventDefault() vs. return false

【讨论】：

您提供的链接是相关的，但我认为这不能完全回答问题。

【解决方案2】：

一种解决方案是在您的 outer 容器上设置一个事件侦听器，并且当触发该侦听器时，仅在您确认点击不是来自容器的任何子级（在这种情况下，@ 987654323@)。您可以调整此解决方案以仅按类、id 等排除特定的孩子：

$(document).ready(function() {

    var outer = $('.outer');
        outer.on('click', handleOuterClick);

    function handleOuterClick(e) {        
        //Assert that the click originated from the outer div, and not from
        //any of its children
        var origin = e.target,
            children = outer.children();
        if(children.index($(origin)) == -1) {
            //Proceed by displaying an alert
            alert("You clicked the outer div!");
        }

    };

});

这是小提琴：http://jsfiddle.net/39ssk/

【讨论】：

【解决方案3】：

看看这个。您可以应用 id，并使用这些 id 来控制点击。

<html><head></head>
<body>
<script type="text/javascript">
function manualToggle(val)
{
    alert(val.id);
}

</script>

<div id="test" onclick="manualToggle(this);">
    <span>Allowed to click</span>
    <span onclick="event.cancelBubble=true;if (event.stopPropagation) event.stopPropagation();">Not allowed to click</span>
    <span>Allowed to click</span>
</div>
</body>
</html>

【讨论】：