文章/答案/技术大牛

发布

社区首页 >问答首页 >Javascript事件冒泡

问Javascript事件冒泡
EN

Stack Overflow用户

提问于 2011-04-07 03:07:47

回答 2查看 589关注 0票数 2

我正在制作一个小网站，如果你点击背景，你会得到一个颜色选择器，允许你改变背景颜色。

问题是，由于事件冒泡，无论我在哪里单击，现在都会显示此拾色器。我怀疑这里的解决方案是将"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>

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

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

委托解决方案的问题是现在根本不再起作用了。而停止传播方法基本上做了同样的事情。

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

javascript

jquery

event-bubbling

回答 2

Stack Overflow用户

回答已采纳

发布于 2011-04-07 03:29:06

您不需要为每个超文本标记语言元素返回false，只需要返回那些冒泡到body的元素，即body的所有子元素。

尝试添加以下内容：

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

所有的点击最终都必须冒泡到body的子节点(或者你点击了body本身)，这将阻止它进一步传播。

票数 3

Stack Overflow用户

发布于 2011-04-07 03:10:36

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

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

在继续编写代码之前，jQuery代码将验证事件目标是否与选择器("body")匹配。

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/5571629

复制

相似问题

问Javascript事件冒泡
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Javascript事件冒泡EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Javascript事件冒泡
EN