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

bodyすべてのHTML 要素に対して false を返す必要はありませんbody。

これを追加してみてください：

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

すべてのクリックは最終的にbodyの子 (またはそれbody自体をクリックしたもの) にバブルする必要があり、これによりそれ以上の伝播が停止します。

于 2011-04-06T19:29:06.423 に答える