防止儿童解雇父母的点击事件 [英] Preventing Child from firing parent's click event

问题描述

请考虑以下代码段：

<div class="div-outer">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    <div class="div-inner" style="background:red">
        Curabitur hendrerit vehicula erat, ut gravida orci luctus vitae.
    </div>
</div>

现在假设外部div有一个实时点击与之相关。当我点击内部时，如何确保不会触发实时点击 > div ？

Now suppose the outer div has a live click associated with it. How do I make sure that the live click is not triggered when I click anywhere in the inner div?

编辑：

这是按要求提供的JS

Here's the JS as requested

$(".div-outer").live("click",function(){alert("hi")}); 

点击.inner-div

This should not be triggereed when clicking on ".inner-div"

推荐答案

您必须向内部子项添加事件侦听器并取消事件的传播。

You have to add an event listener to the inner child and cancel the propagation of the event.

在简单JS中类似

document.getElementById('inner').addEventListener('click',function (event){
   event.stopPropagation();
});

就足够了。请注意， jQuery提供相同的工具：

$(".inner-div").click(function(event){
    event.stopPropagation();
});  

或

$(".inner-inner").on('click',function(event){
    event.stopPropagation();
});  

这篇关于防止儿童解雇父母的点击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！