Question

enter image description here

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

现在，当我对内部div标签执行单击时，会弹出一个警告。从内部div标签中选择项目时重复相同。我无法在内部div标签中进行选择。怎么解决这个问题？

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

Answer 1

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

对转贴感到抱歉，但答案已经在： event.preventDefault() vs. return false

Answer 2

一种解决方案是在outer容器上设置事件监听器，并且在触发监听器时，只有在您确认点击不是来自任何容器的子容器之后才会执行操作（在这种情况下），inner）。您可以调整此解决方案，仅按类，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/

Answer 3

检查一下。您可以应用id，并使用这些ID来控制onclick。

<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>

点击不同的DIV标签

3 个答案: