2

我正在制作一个小网站，如果您单击背景，您将获得一个颜色选择器，允许您更改背景颜色。

问题是，由于事件冒泡，无论我点击哪里，这个颜色选择器现在都会出现。我怀疑这里的解决方案是向整个页面上的每个 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>

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

单击页眉或页脚并更改该颜色会同时更改，因为该颜色实际上是正文背景。内容只改变内容。

委托解决方案的问题在于，现在根本不再适用。而 stoppropagation 方法基本上是做同样的事情。

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

4

2 回答 2

3

与其自己处理冒泡，不如让 jQuery 来做：

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

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

于 2011-04-06T19:10:36.430 回答
3

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

尝试添加这个：

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

所有点击最终都必须冒泡到body的孩子（或者你点击body自己），这将阻止它进一步传播。

于 2011-04-06T19:29:06.423 回答