Comment faire en sorte que l'événement de clic se déclenche UNIQUEMENT sur le DIV parent, et non sur les enfants ?

Question

J'ai un DIV avec une classe foobar et quelques DIVs à l'intérieur de ce DIV qui ne sont pas classés, mais je suppose qu'ils héritent de la classe foobar classe :

$('.foobar').on('click', function() { /*...do stuff...*/ });

Je veux que cela ne se déclenche que lorsque l'on clique quelque part dans le DIV mais pas sur ses DIVs enfants.

Answer 1

// if its li get value 
document.getElementById('li').addEventListener("click", function(e) {
                if (e.target == this) {
                    UodateNote(e.target.id);
                }
                })

                function UodateNote(e) {

    let nt_id = document.createElement("div");
    // append container to duc.
    document.body.appendChild(nt_id);
    nt_id.id = "hi";
    // get conatiner value . 
    nt_id.innerHTML = e;
    // body...
    console.log(e);

}

li{
 cursor: pointer;
    font-weight: bold;
  font-size: 20px;
    position: relative;
    width: 380px;
    height: 80px;
    background-color: silver;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: 0.5cm;
    border: 2px solid purple;
    border-radius: 12%;}

    p{
     cursor: text;
  font-size: 16px;
   font-weight: normal;
    display: block;
    max-width: 370px;
    max-height: 40px;
    overflow-x: hidden;}

<li id="li"><p>hi</p></li>