jQuery - div внутри div, как запустить только событие 1 клик, когда внутри нажата

У меня есть div внутри div. Если внутренний div был нажат (closeme div), я не хочу запускать событие другого события div (контейнер div). Как я могу это сделать ?jQuery - div внутри div, как запустить только событие 1 клик, когда внутри нажата

HTML

<div id="container"> 
content 
<div id="closeme"></div> 
</div>

$(document).on('click', '[id="container"]' ,function(){ 
alert("I am clicked"); 
} 

$(document).on('click', '[id="closeme"]' ,function(){ 
alert("I am clicked"); 
}

источник

2016-09-23 caner taşdemir

https://api.jquery.com/event.stoppropagation/ - пользователь 'event.stoppropagation' –

$(document).on('click', '[id="container"]', function(e) { 
 
    e.stopPropagation(); 
 
    alert("I am container"); 
 
}) 
 

 
$(document).on('click', '[id="closeme"]', function(e) { 
 
    e.stopPropagation(); 
 
    alert("I am closeme"); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    content 
 
    <div id="closeme">qwe</div> 
 
</div>

Используйте event.stopPropagation()

Описание: Предотвращает событие от пузырьков дерева DOM, предотвращая уведомление родительских обработчиков о событии.

источник

2016-09-23 04:51:11 guradio

Спасибо. Должен ли я использовать функцию closeme перед функцией контейнера? Потому что, если контейнер сначала получает событие click (даже если пользователь нажимает на closeme), он останавливается и никогда не запускает функцию closeme? –

Я сомневаюсь, что порядок влияет на – guradio

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

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
</head> 
<body> 
    <div id="container"> 
    content 
    <div id="closeme">Inner Div</div> 
    </div> 
</body> 
    <script> 
    $(document).on('click', '[id="container"]', function(event) { 
     alert("container clicked"); 
    }); 

    $(document).on('click', '[id="closeme"]', function(event) { 
     event.stopPropagation(); 
     alert("coloseme clicked"); 
    }); 
    </script> 
</html>

источник

2016-09-23 04:58:15 rushi

делать, если проверить, если цель #closeme

$(document).on('click', '[id="closeme"]', function(event) { 
    if ($(event.target).is('[id="closeme"]')) { 
     alert("coloseme clicked"); 
    } 
    });

источник

2016-09-23 05:00:01 madalinivascu

jQuery - div внутри div, как запустить только событие 1 клик, когда внутри нажата

ответ

Смежные вопросы