Всплывающие события Javascript

Я делаю небольшой сайт, где, если вы нажмете на фон, вы получите палитру цветов, позволяющую изменить цвет фона.

Проблема в том, что эта палитра цветов теперь отображается независимо от того, где я нажимаю, из-за всплытия событий. Я сомневаюсь, что решение здесь заключается в добавлении «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
person KdgDev    schedule 06.04.2011    source источник
comment
Было бы полезно, если бы вы могли предоставить какое-то изображение страницы и указать, какие части страницы являются местами, где события кликов будут нацелены на элемент <body>.   -  person Pointy    schedule 07.04.2011

Ответы (2)


arrow_upward
3
arrow_downward

Вам не нужно возвращать false для каждого элемента HTML, только для тех, которые всплывают на body, а именно для всех дочерних элементов body.

Попробуйте добавить это:

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

Все клики должны в конечном итоге переходить к дочерним элементам body (иначе вы нажали на сам body), и это предотвратит его дальнейшее распространение.

person zdyn    schedule 06.04.2011
comment
добавил некоторые детали в мой исходный пост. - person KdgDev; 06.04.2011
comment
@WebDevHobo, я так понимаю, вы хотите, чтобы нажатие на header и footer распространялось на body, но не при нажатии на content? - person zdyn; 06.04.2011
comment
да. Думаю, я останавливаю распространение контента, выполняя для него return false в функции click(). - person KdgDev; 06.04.2011
comment
У меня это работает. Я просто добавил гиперссылки в селектор для остановки распространения, сбросил children(), а остальные оставил кликабельными. Кроме того, больше не использовать код Пойнти. - person KdgDev; 06.04.2011

arrow_upward
3
arrow_downward

Вместо того, чтобы заниматься всплытием самостоятельно, позвольте jQuery сделать это:

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

Код jQuery проверит, что цель события соответствует селектору («телу»), прежде чем продолжить работу с вашим кодом.

person Pointy    schedule 06.04.2011
comment
Я добавил некоторые детали, так как исходный код останавливал работу сайта - person KdgDev; 06.04.2011
comment
@WebDevHobo хорошо, учитывая ваш HTML, на странице нет ничего, что раскрывало бы какую-либо поверхность <body>. Ваша оболочка <div> будет окружать элементы внутри нее, и тело будет таким же большим. Таким образом, некуда поместить мышь, которая позволила бы элементу body стать целью события щелчка. - person Pointy; 07.04.2011