Checked Clicked Element in Bubbling

Question

Я занимался пузырями событий, и я создал для себя типичные 3 divs друг для друга, и я смог заставить код работать и событие прекращать «пузыриться» там, где я хотел.

Мой код был неуклюжим, поэтому я попытался сделать его более упрощенным. Имея все мои <divs>, указывается на одну функцию, у которой была заявка, в которой говорилось, что если было нажато<div>, запустите эту функцию, а затем прекратите распространение, но я верю, что способ «проверки» щелчка неверен.

Ссылка: https://jsfiddle.net/theodore_steiner/t5r5kov0/3/

var d1 = document.getElementById("d1"); 
 
var d2 = document.getElementById("d2"); 
 
var d3 = document.getElementById("d3"); 
 

 
function showme(event) { 
 
    if (d3.onclick == true) { 
 
    alert("hello") 
 
    event.stopPropagation(); 
 
    } else { 
 
    alert("hello"); 
 
    } 
 
}; 
 

 
d1.addEventListener("click", showme); 
 
d2.addEventListener("click", showme); 
 
d3.addEventListener("click", showme);

#d1 { 
 
    height: 300px; 
 
    width: 300px; 
 
    border: 1px solid black; 
 
} 
 
#d2 { 
 
    height: 200px; 
 
    width: 200px; 
 
    border: 1px solid black; 
 
} 
 
#d3 { 
 
    height: 100px; 
 
    width: 100px; 
 
    border: 1px solid black; 
 
}

<div id="d1"> 
 
    <div id="d2"> 
 
    <div id="d3"> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

event.target.id Использование в качестве event.target возвратит element, на котором event является invoked и id является собственностью DOMElement

Event.target, Ссылка на объект, отправивший событие.

var d1 = document.getElementById("d1"); 
 
var d2 = document.getElementById("d2"); 
 
var d3 = document.getElementById("d3"); 
 

 
function showme(event) { 
 
    if (event.target.id == 'd3') { 
 
    alert("hello") 
 
    event.stopPropagation(); 
 
    } else { 
 
    alert("hello"); 
 
    } 
 
}; 
 

 
d1.addEventListener("click", showme); 
 
d2.addEventListener("click", showme); 
 
d3.addEventListener("click", showme);

#d1 { 
 
    height: 300px; 
 
    width: 300px; 
 
    border: 1px solid black; 
 
} 
 
#d2 { 
 
    height: 200px; 
 
    width: 200px; 
 
    border: 1px solid black; 
 
} 
 
#d3 { 
 
    height: 100px; 
 
    width: 100px; 
 
    border: 1px solid black; 
 
}

<div id="d1"> 
 
    <div id="d2"> 
 
    <div id="d3"> 
 
    </div> 
 
    </div> 
 
</div>