Предотвращение прерывания родительского щелчка ребенка

Рассмотрим следующий фрагмент:

<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 есть связанный с ним живой click. Как я могу убедиться, что live click не запускается, когда я click где-либо во внутреннем div?

Изменить:

Здесь JS по запросу

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

Это не должно быть триггером при нажатии на ".inner-div"

Ответы

Ответ 1

Вы должны добавить прослушиватель событий к внутреннему ребенку и отменить распространение события.

В простом JS что-то вроде

document.getElementById('inner').addEventListner('click',function (e){
   e.stopPropagation();
});

. Обратите внимание, что jQuery предоставляет тот же объект:

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

или

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

Ответ 2

вы можете сделать это, добавив событие click на внутренний div и используя либо return false;, либо event.stopPropagation();

$(".div-inner").click(function(){

  return false;
})

или

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

  event.stopPropagation();
})

jsFiddle

Ответ 3

Создайте новый click прослушиватель для внутреннего div и вызовите event.stopPropagation() в этом новом событии.

как

$('div-outer').on('click','div-inner',function(e){
    e.stopPropagation();
});

Ответ 4

использовать stopPropagation в файле js

 $(".eventclick").click(function(e) {
    e.stopPropagation();
});