イベントターゲットの親に特定のクラスを適用しないこと

Question

私はイベントの委任を実践しています。私はdivに座っている記事タグ内に4段落を設定しています。 .Greenクラスを適用して、各段落の背景をクリックするときだけ変更したいと思います。しかし、緑色のクラスは、親（記事）と祖父母（div）にのみ適用されます。私のコードに何が間違っているか教えてください。

function paintParagraph(e) { 
 
\t if (!e) { 
 
\t \t e = window.event; 
 
\t } 
 
\t var target, parent; 
 
\t target = e.target || e.srcElement; 
 
\t parent = target.parentNode; 
 
\t parent.className = 'green'; 
 
\t e.stopPropagation(); 
 
\t 
 
} 
 

 
var paragraphList = document.querySelector('#p-list'); 
 
paragraphList.addEventListener('click', function(e) { 
 

 
paintParagraph(e); 
 

 
} 
 
, false);

\t p { 
 
\t \t padding: 10px; 
 
\t \t margin: 20px; 
 
\t \t border: 2px solid; 
 
\t \t line-height: 1.5em; 
 
\t \t letter-spacing: 0.2em; 
 
\t \t text-align: center; 
 
\t } 
 

 
    .green { 
 
\t \t background-color: green; 
 
\t }

<div id="main"> 
 
\t \t <article id="p-list"> 
 
\t \t \t <p class="para">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae perferendis culpa velit excepturi iste reprehenderit quaerat debitis repudiandae itaque beatae. Numquam dolorum ducimus iusto temporibus facilis error possimus amet, illo.</p 
 
\t \t \t ><p class="para2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae perferendis culpa velit excepturi iste reprehenderit quaerat debitis repudiandae itaque beatae. Numquam dolorum ducimus iusto temporibus facilis error possimus amet, illo.</p 
 
\t \t \t ><p class="para3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae perferendis culpa velit excepturi iste reprehenderit quaerat debitis repudiandae itaque beatae. Numquam dolorum ducimus iusto temporibus facilis error possimus amet, illo.</p 
 
\t \t \t ><p class="para4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae perferendis culpa velit excepturi iste reprehenderit quaerat debitis repudiandae itaque beatae. Numquam dolorum ducimus iusto temporibus facilis error possimus amet, illo.</p 
 
\t \t ></article> 
 
\t </div>

Answer 1

クリックされたターゲットだけ進まその後、pとする場合は、チェックする必要があります。

if(target.nodeName !== "P") return false; 

これで、ターゲットとしてp要素のみがクラスに適用されます。

target.className = 'green'; 

function color(elem) { 
 
    if (elem.nodeName == "P") { 
 
    elem.className = 'green'; 
 
    } 
 

 
    if (elem.parentNode !== null) { 
 
    color(elem.parentNode) 
 
    } 
 
} 
 

 

 

 
function paintParagraph(e) { 
 
    if (!e) { 
 
    e = window.object; 
 
    } 
 
    var target, parent; 
 
    target = e.target || e.srcElement; 
 
    color(target) 
 

 
} 
 

 
var paragraphList = document.querySelector('#p-list'); 
 
paragraphList.addEventListener('click', function(e) { 
 

 
    paintParagraph(e); 
 

 
}, false);

p { 
 
    padding: 10px; 
 
    margin: 20px; 
 
    border: 2px solid; 
 
    line-height: 1.5em; 
 
    letter-spacing: 0.2em; 
 
    text-align: center; 
 
} 
 
.green { 
 
    background-color: green; 
 
}

<div id="main"> 
 
    <article id="p-list"> 
 
    <p class="para">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae perferendis culpa velit excepturi iste reprehenderit quaerat debitis repudiandae itaque beatae. Numquam dolorum ducimus iusto temporibus facilis error possimus amet, illo.</p> 
 
    <p class="para2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae perferendis culpa velit excepturi iste reprehenderit quaerat debitis repudiandae itaque beatae. Numquam dolorum ducimus iusto temporibus facilis error possimus amet, illo.</p> 
 
    <p class="para3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae perferendis culpa velit excepturi iste reprehenderit quaerat debitis repudiandae itaque beatae. Numquam dolorum ducimus iusto temporibus facilis error possimus amet, illo.</p> 
 
    <p class="para4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae perferendis culpa <span> HELLO</span>velit excepturi iste reprehenderit quaerat debitis repudiandae itaque beatae. Numquam dolorum ducimus iusto temporibus facilis error possimus amet, 
 
     illo.</p> 
 
    </article> 
 
</div>