Question

我正在练习活动授权，我偶然发现了这一点。我在一个文章标签内设置了4个段落，它位于div中。我想应用一个.green类，只有当我点击它时才会改变每个段落的背景。然而，绿色类只被应用到父（文章）和祖父母（div）。请告诉我我的代码有什么问题。

function paintParagraph(e) {
	if (!e) {
		e = window.event;
	}
	var target, parent;
	target = e.target || e.srcElement;
	parent = target.parentNode;
	parent.className = 'green';
	e.stopPropagation();
	
}

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 velit excepturi iste reprehenderit quaerat debitis repudiandae itaque beatae. Numquam dolorum ducimus iusto temporibus facilis error possimus amet, illo.</p
		></article>
	</div>

Answer 1

您应该检查点击的目标是否为p然后才进一步。

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

现在你将只有p元素作为目标在其上应用类。

 target.className = 'green';

＆＃13;

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);

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

据我了解，您希望

元素只有在用户单击

元素（如果为真）时才具有.green类，这就是我的答案。

在这种情况下，我引用了

元素而不是

元素。

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

var paragraphList = document.querySelectorAll('#p-list > p');
paragraphList.forEach((element) => {
  element.addEventListener('click', paintParagraph, false);
});

停止将某个类应用于事件目标的父级

2 个答案: