我正在尝试使用下面的代码通过 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>
应该改变颜色。
我做错了什么?
最佳答案
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>
关于javascript - jQuery 事件传播未按预期工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28047867/