VPF::клик снаружи дива - Форум программистов

katka

Дата 18.10.2006, 09:38 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 164
Регистрация: 19.7.2004

Репутация: нет
Всего: 6

мне кажется, вопрос довольно распространённый, только я никак не найду похожую тему. если была - покажите, пожалуйста.
мы пишем имитацию выпадающих списков, и нам нужно скрывать список (див) при клике мимо него. есть функция hide_all_selects(), но на какое событие её повесить? что бы вы посоветовали?

--------------------

если с другом буду я, если с другом буду я, а медведь — без друга

Avb

Дата 18.10.2006, 10:53 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 115
Регистрация: 5.7.2006

Репутация: 4
Всего: 13

http://forum.vingrad.ru/index.php?showtopic=115646

katka

Дата 18.10.2006, 10:59 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 164
Регистрация: 19.7.2004

Репутация: нет
Всего: 6

о! спасибо. сама не нашла.

--------------------

если с другом буду я, если с другом буду я, а медведь — без друга

Burrr

Дата 18.10.2006, 13:46 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 459
Регистрация: 4.9.2005

Репутация: 10
Всего: 20

Можно проще - воспользоваться свойством cancelBubble объекта event.
1) На body повесить обработчик, скрывающий выпадушку по клику
2) На саму выпадушку повесить обработчик, который запретит событию распространятся вверх по дереву DOM

Код

evt = event || window.event;
evt.cancelBubble = true;

--------------------

JavaScript на fastcoder, sqlinfo.ru

Avb

Дата 18.10.2006, 14:36 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 115
Регистрация: 5.7.2006

Репутация: 4
Всего: 13

Цитата(Burrr @ 18.10.2006, 13:46

)

1) На body повесить обработчик, скрывающий выпадушку по клику
2) На саму выпадушку повесить обработчик, который запретит событию распространятся вверх по дереву DOM

Но в таком случае нужно учесть, что обработчик, скрывающий выпадушку, будет вызываться при каждом клике в пределах документа. Если в нем кроме divElement.style.display = 'none' ничего нет, то тогда все ОК. А если есть дополнительные действия, то нужно смотреть по ситуации.

Burrr, не так ли?

Burrr

Дата 18.10.2006, 14:42 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 459
Регистрация: 4.9.2005

Репутация: 10
Всего: 20

Avb, совершенно верно, Но я бы не сказал, что в этом есть какие-то затруднения. Обычно я пишу обработчик так:

Код

document.onclick = function() {
     firstFunc();
     secondFunc();
     //...
}

Вписываем туда функций, сколько влезет...

--------------------

JavaScript на fastcoder, sqlinfo.ru

Avb

Дата 18.10.2006, 15:52 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 115
Регистрация: 5.7.2006

Репутация: 4
Всего: 13

Burrr, я имел в виду не невозможность выполнять несколько функций, а возможные затупления, если вдруг при каждом скрытии дивов необходимо выполнять какой-то "тяжелый" код.
И то это чисто теоретически, т. к. этот тяжелый код можно не выполнять, если див невидимый.
Просто katka, должна это учесть и при необходимости добавить дополнительные проверки.

katka

Дата 18.10.2006, 16:54 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 164
Регистрация: 19.7.2004

Репутация: нет
Всего: 6

Цитата(Burrr @ 18.10.2006, 13:46

)

Код


evt = event || window.event;
evt.cancelBubble = true;

куда это писать? там, где обрабатываем клик на выпадушку? мм.. что такое event? smile

--------------------

если с другом буду я, если с другом буду я, а медведь — без друга

Burrr

Дата 18.10.2006, 16:59 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 459
Регистрация: 4.9.2005

Репутация: 10
Всего: 20

Код


<a onclick="func(event);return false;" href="">link</a>
<script type="text/javascript">
     var evt = event || window.event;
     evt.cancelBubble = true;
     // дальше открываешь выпадушку ну или какие-нить действия
</script>

Это сообщение отредактировал(а) Burrr - 18.10.2006, 16:59

--------------------

JavaScript на fastcoder, sqlinfo.ru

katka

Дата 18.10.2006, 17:11 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 164
Регистрация: 19.7.2004

Репутация: нет
Всего: 6

мне во все функции с обработкой кликов пихать евент в скобочки? блин. простите, ради бога, но я ничего не поняла опять ((
вот, давайте с примером..

Код


<div id="select42" onClick="show_options(42)"></div>

в моём идиллическом мире нет никаких евентов, к сожалению smile

--------------------

если с другом буду я, если с другом буду я, а медведь — без друга

Burrr

Дата 18.10.2006, 17:20 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 459
Регистрация: 4.9.2005

Репутация: 10
Всего: 20

Цитата

мне во все функции с обработкой кликов пихать евент в скобочки?

Да, а в чем проблема? smile

Это нужно для мозиллы, ИЕ работает на window.event.

Код


<div id="select42" onClick="show_options(42, event)"></div>
<script type="text/javascript">
function show_options(num, evt) {
     evt = evt || window.event;
     evt.cancelBubble = true;
     // дальше открываешь выпадушку ну или какие-нить действия
}
</script>

Это сообщение отредактировал(а) Burrr - 18.10.2006, 17:21

--------------------

JavaScript на fastcoder, sqlinfo.ru

katka

Дата 18.10.2006, 17:36 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 164
Регистрация: 19.7.2004

Репутация: нет
Всего: 6

Burrr, спасибо!! рработает!! красота!

--------------------

если с другом буду я, если с другом буду я, а медведь — без друга

Avb

Дата 18.10.2006, 18:08 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 115
Регистрация: 5.7.2006

Репутация: 4
Всего: 13

Ну, и я тут примерчик набросал:

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
<script type="text/javascript">
window.onload = init; //После загрузки html-я вызываем init

function init() {
    // Навешиваем обработчики события
    document.body.onclick = closeDiv; 
    document.getElementById("select42").onclick = doNothing;  
    document.getElementById("show").onclick = openDiv;

}

function closeDiv() {
    //Прячем наш див и показываем див show
    document.getElementById("select42").style.display = "none";
    document.getElementById("show").style.display = "block";
}

function openDiv(event) {
    //Показываем наш див и прячем див show 
    document.getElementById("select42").style.display = "block";
    document.getElementById("show").style.display = "none";
    //Останавливаем распространение события
    var event = event || window.event;
    if (event.stopPropagation) {
      event.stopPropagation();
    } else {
      event.cancelBubble = true;
    }
    
}

function doNothing(event) {
    //Прячем див show
    document.getElementById("show").style.display = "none";
    //Останавливаем распространение события
    var event = event || window.event;
    if (event.stopPropagation) {
      event.stopPropagation();
    } else {
      event.cancelBubble = true;
    }
}
</script>
</head> 
<body>
<div id="show" style="display:none">Показать див снова</div>
<br>
<br>
<div id="select42" style="border: 1px solid black">Это наш див. Если кликнуть мышкой внутри него ничего не произойдет,
если снаружи - див спрячется.</div>
<br>
<br>
<div>Всякий другой контент</div>
<div>Всякий другой контент</div>
<div>Всякий другой контент</div>
<div>Всякий другой контент</div>
<div>Всякий другой контент</div>
<div>Всякий другой контент</div>
<div>Всякий другой контент</div>
<div>Всякий другой контент</div>
<div>Всякий другой контент</div>
<div>Всякий другой контент</div>
<div>Всякий другой контент</div>
<div>Всякий другой контент</div>
<div>Всякий другой контент</div>

</body>
</html>

Добавлено @ 18:22
katka, советую почитать раздел Events на http://www.quirksmode.org/js/contents.html для лучшего понимания обработки событий.

Это сообщение отредактировал(а) Avb - 19.10.2006, 10:58

Nicholas_S

Дата 18.10.2006, 19:39 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 486
Регистрация: 12.10.2006
Где: Санкт-Петербург

Репутация: 5
Всего: 19

Есть более изысканное решение для "отлова" событий вне объекта.
Заключается он в использовании методов setCapture()/releaseCapture().
Например:

Код


  <div id="myDiv" onClick="this.innerHTML += ' click ';">Test div</div>
  <input type="button" onClick="document.getElementById('myDiv').setCapture()"  value="Capture the div">

После нажатия на кнопку слой будет принимать событие onClick из любой области документа.
Фича поддерживается IE. Чтобы расширить на Mozilla/Opera, можно определить прототипы для элементов документа.
Например, следующим образом:

Код


if (window.HTMLElement)
{
    var element = HTMLElement.prototype;
    // Список событий для "отлова"
    var capture = ["click", "mousedown", "mouseup", "mousemove", "mouseover", "mouseout"];

    element.setCapture = function()
    {
        var self = this;
        var flag = false;
        this._capture = function(e)
        {
            if (flag) return;
            flag = true;
            var event = document.createEvent("MouseEvents");
            event.initMouseEvent(e.type,
                e.bubbles, e.cancelable, e.view, e.detail,
                e.screenX, e.screenY, e.clientX, e.clientY,
                e.ctrlKey, e.altKey, e.shiftKey, e.metaKey,
                e.button, e.relatedTarget);
            self.dispatchEvent(event);
            flag = false;
        }

        for (var i=0; i<capture.length; i++)
            window.addEventListener(capture[i], this._capture, true);
    }

    element.releaseCapture = function()
    {
        for (var i=0; i<capture.length; i++)
        {
          if (this._capture)
            window.removeEventListener(capture[i], this._capture, true);
        }

        this._capture = null;
    }
}

Вуаля.

--------------------

...все в мире относительно

Zeroglif

Дата 18.10.2006, 22:08 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 644
Регистрация: 22.9.2005

Репутация: 28
Всего: 66

Цитата(Burrr @ 18.10.2006, 17:20

)

Код


<div id="select42" onClick="show_options(42, event)"></div>
<script type="text/javascript">
function show_options(num, evt) {
     evt = evt || window.event;
     evt.cancelBubble = true;
}
</script>

Строчка evt = evt || window.event; для такого примера не обязательна, и cancelBubble - это всё же не комильфо для тех браузеров, что знают и умеют stopPropagation. smile

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »