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本身），这将阻止它进一步传播。

Javascript事件冒泡

2 个答案: