Javascript事件冒泡

Question

我正在做一个小站点，如果您单击背景，您将获得一个颜色选择器，可以更改背景颜色。

问题是，由于事件冒泡，无论我在哪里单击，此颜色选择器现在都显示出来。 我怀疑这里的解决方案是向整个页面上的每个HTML元素添加“ return false”。 我该怎么办？

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>

页面布局使页眉和页脚背景以及相同的颜色和内容是不同的。

单击页眉或页脚并更改该颜色都会同时更改，因为该颜色实际上是主体背景。 内容仅更改内容。

委托解决方案的问题在于，现在根本无法使用了。 停止传播方法基本上可以完成相同的操作。

我需要打开一些传播，但不是全部。

Answer 1

而不是自己处理冒泡，让jQuery来做：

$('body').delegate('body', 'click', function() {
  // your code
});

jQuery代码将在继续执行代码之前验证事件目标是否与选择器（“ body”）匹配。

Answer 2

您不需要为每个HTML元素都返回false，只需返回冒泡到body元素，即body的所有子元素。

尝试添加以下内容：

$(function(){
    $("body").children().click(function(e){
        e.stopPropagation()
    }); 
});

所有的单击最终都必须冒泡到body的孩子（否则您单击了body本身），这将阻止它进一步传播。