javascript - jQuery 事件传播未按预期工作

Question

我正在尝试使用下面的代码通过 jQuery 传播事件:

$(document).ready(function() {
$('#main').click(function(e){
var el = e.target.nodeName;
var $jObj = $(el);//jQuery object
$jObj.css('color','green');
});
});

这是简单的 html 代码:

<div id="main">
<p>Test one</p>
<p>Test two</p>
<p>Test three</p>
</div>

现在，如果我单击其中一个 p 元素，不仅所选的 p 颜色会更改为绿色，而且所有 p 也会更改为绿色。我无法理解其中的原因。根据上面的jQuery脚本只选择了<p>应该改变颜色。我做错了什么？

Answer 1

According to the jQuery script above only the selected p

我对此表示怀疑。您正在选择所有 p 元素:

var el = e.target.nodeName; // el = "P"
var $jObj = $(el);//jQuery object // equiv to $("p")

e.target.nodeName 是值 "P"，然后将其用作选择器，$("P") 选择所有 p 元素。

要仅选择事件目标，请将 DOM 元素本身传递给 jQuery:

$(e.target)

相关文档:jQuery(element) , event.target .

$(document).ready(function() {
$('#main').click(function(e){
var $jObj = $(e.target);//jQuery object
$jObj.css('color','green');
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<p>Test one</p>
<p>Test two</p>
<p>Test three</p>
</div>