Javascript 事件冒泡
我正在制作一个小网站，如果您单击背景，您会得到一个颜色选择器，允许您更改背景颜色。
问题是，由于事件冒泡，无论我点击哪里，这个颜色选择器现在都会显示。我怀疑这里的解决方案是将“return false”添加到整个页面上的每个 HTML 元素。对此我能做什么？
Javascript：
var colorPicker = $.farbtastic('#colorpicker');
var bodyBackgroundColor = $('body').css('background-color').rgbToHex();
$('body').click(function() {
//Set the link to the field displaying the chosen color.
colorPicker.linkTo('#newcolor');
//Set the color on the colorpicker wheel.
colorPicker.setColor(bodyBackgroundColor);
//Set oldcolor field values
$('#oldcolor').val(bodyBackgroundColor);
$('#oldcolor').css('background-color', bodyBackgroundColor);
//Set newcolor field values
$('#newcolor').val(bodyBackgroundColor);
new Boxy($('#form_changecolor'));
return false;
});
以下是 HTML 的概述：
<html>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
<html>
页面布局是这样的：页眉和页脚背景以及相同的颜色和内容是不同的。
单击页眉或页脚并更改颜色会同时更改两者，因为该颜色实际上是正文背景。内容仅改变内容。
委托解决方案的问题是现在根本不再起作用了。 stoppropagation 方法基本上做同样的事情。
我需要打开一些传播，但不是全部。
I'm making a small site where if you click on the background, you get a colorpicker allowing you to change the background color.
The problem is that this colorpicker is now showing up no matter where I click, because of event bubbling. I doubt the solution here is adding "return false" to every single HTML element on the entire page. What can I do about this?
The Javascript:
var colorPicker = $.farbtastic('#colorpicker');
var bodyBackgroundColor = $('body').css('background-color').rgbToHex();
$('body').click(function() {
//Set the link to the field displaying the chosen color.
colorPicker.linkTo('#newcolor');
//Set the color on the colorpicker wheel.
colorPicker.setColor(bodyBackgroundColor);
//Set oldcolor field values
$('#oldcolor').val(bodyBackgroundColor);
$('#oldcolor').css('background-color', bodyBackgroundColor);
//Set newcolor field values
$('#newcolor').val(bodyBackgroundColor);
new Boxy($('#form_changecolor'));
return false;
});
Here's an overview of what the HTML looks like:
<html>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
<html>
The page layout is such that the Header and footer background and same color and content is a different one.
Clicking on header or footer and changing that color changes both, because that color is actually the body-background. Content changes only content.
The problem with the delegate solution is that now is just doesn't work anymore at all. And the stoppropagation method basically does the same thing.
I need some propagation turned on, but not all of it.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您不需要为每个 HTML 元素返回 false，只需为冒泡到
body的元素（即body的所有子元素）返回 false。尝试添加以下内容：
所有点击最终都必须冒泡到
body的子级（否则您点击了body本身），这将阻止其进一步传播。You don't need to return false for every HTML element, only the ones that bubble to
body, namely all ofbody's children.Try adding this:
All clicks have to eventually bubble to
body's children (or else you clicked onbodyitself) and this will stop it from propagating further.不要自己处理冒泡，而是让 jQuery 来处理：
jQuery 代码将验证事件目标是否与选择器（“主体”）匹配，然后再继续执行代码。
Instead of handling the bubbling yourself, let jQuery do it:
The jQuery code will verify that the event target matches the selector ("body") before continuing on with your code.