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

Burrr

Дата 19.10.2006, 10:33 (ссылка)

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

Загрузка ...

Опытный

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

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

Цитата

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

Zeroglif, проверял работу cancelBubble в ИЕ 6, Opera 7.5+, NN 7.1+, Mozilla 1.7, FF 1,5 - везде работает. По идее cancelBubble изначально поддерживалась только ИЕ, но если сейчас оно работает и во всех остальных бпаузерах, то зачем плодить методы ;)

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

JavaScript на fastcoder, sqlinfo.ru

AKS

Дата 19.10.2006, 11:00 (ссылка)

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

Загрузка ...

Участник форума

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

Репутация: 27
Всего: 52

Burrr,

Цитата

проверял работу cancelBubble в ИЕ 6, Opera 7.5+, NN 7.1+, Mozilla 1.7, FF 1,5 - везде работает

Это св-во - Deprecated!

Nicholas_S,

Цитата

...более изысканное решение... в использовании методов setCapture()/releaseCapture().

А что "изысканного" может быть в куче дополнительного кода?

katka

Дата 19.10.2006, 12:22 (ссылка)

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

Загрузка ...

Бывалый

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

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

Avb, спасибо, почитаю обязательно. а код у меня в ие ничего не показывает (

Nicholas_S, гигантский код какой )) вуаля, действительно )

Zeroglif, а как комильфо писать? stopPropagation вместо cancelBubble? или как?

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

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

Zeroglif

Дата 19.10.2006, 12:52 (ссылка)

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

Загрузка ...

Опытный

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

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

Цитата(katka @ 19.10.2006, 12:22

)

stopPropagation вместо cancelBubble? или как?

Код


evt.stopPropagation ? evt.stopPropagation() : evt.cancelBubble = true;

Avb

Дата 19.10.2006, 13:14 (ссылка)

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

Загрузка ...

Шустрый

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

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

katka, код нужно сохранить в utf-8. Ну или поменять кодировку на windows-1251.

katka

Дата 19.10.2006, 13:17 (ссылка)

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

Загрузка ...

Бывалый

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

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

Zeroglif, ага, ясно. спасибо.

Avb, да теперь всё видно. спасибо за пример

Это сообщение отредактировал(а) katka - 19.10.2006, 13:21

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

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

Avb

Дата 19.10.2006, 13:18 (ссылка)

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

Загрузка ...

Шустрый

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

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

Цитата(katka @ 19.10.2006, 12:22

)

stopPropagation вместо cancelBubble? или как?

Цитата(Zeroglif @ 19.10.2006, 12:52

)

evt.stopPropagation ? evt.stopPropagation() : evt.cancelBubble = true;

- вот так.

А если надо еще и предотвратить выполнение default-ного действия (например, отменить переход по ссылке или сабмит формы), то так

Код


    if (event.preventDefault) {
      event.preventDefault();
      event.stopPropagation();
    } else {
      event.returnValue = false;
      event.cancelBubble = true;
    }

katka

Дата 19.10.2006, 13:24 (ссылка)

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

Загрузка ...

Бывалый

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

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

Цитата(Avb @ 19.10.2006, 13:18

)

А если надо еще и предотвратить выполнение default-ного действия

кстати, да! предотвратить-то тоже надо. как-то я не подумала, спасибо.

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

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

Nicholas_S

Дата 19.10.2006, 14:45 (ссылка)

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

Загрузка ...

Опытный

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

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

AKS, katka, изысканность определяется не только размером, но и реализацией.
Методы setCapture/releaseCapture было созданы для подобного рода ситуаций. Если требуется отловить клик вне элемента только в IE, дополнительный код не нужен. К тому же, он не такой и большой, как может показаться:

Код


if (window.HTMLElement)
{
    var element = HTMLElement.prototype;
    var capture = ["click", "mousedown", "mouseup", "mousemove", "mouseover", "mouseout"];
    element.setCapture = function()
    {
        var self = this, f = 0;
        this._capture = function(e)
        {
            if (f) return;
            f = 1;
            var event = document.createEvent("MouseEvents");
            with (e) event.initMouseEvent(type, bubbles, cancelable, view, detail, screenX, screenY, clientX, clientY,
                                                            ctrlKey, altKey, shiftKey, metaKey, button, relatedTarget);
            self.dispatchEvent(event);
            f = 0;
        }
        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;
    }
}

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

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

katka

Дата 19.10.2006, 15:10 (ссылка)

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

Загрузка ...

Бывалый

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

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

Nicholas_S, да нет, мы кроссбраузерно пишем.
а код прекрасен. хотя я его и не понимаю, начиная с самой первой строчки smile

только я уже по-другому сделала, как мне товарищи насоветовали. я почитаю про setCapture/releaseCapture обязательно, только напрягает вот этот сопроводительный код для не-ие.

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

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

Avb

Дата 19.10.2006, 15:16 (ссылка)

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

Загрузка ...

Шустрый

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

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

Nicholas_S, если не трудно, ради интереса, посмотри мой пример выше из поста

Цитата

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

и реализуй то же самое с помощью setCapture/releaseCapture

Просто мне кажется, что это метод не определяет клик вне слоя, а перехватывает все события как внутри слоя, так и вне его. Как узнать, что кликнули именно вне слоя?

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

Nicholas_S

Дата 19.10.2006, 16:14 (ссылка)

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

Загрузка ...

Опытный

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

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

katka, (в стиле кота Матроскина) если хоочешь - объяснюу. smile

Avb, ты прав, метод мерехватывает события как вне слоя, так и внутри его.
Чтобы определить, на каком элементе кликнули, достаточно обратиться к параметру event.srcElement (для IE) или event.originalTarget (FF).
Можно посмотреть след. код, покликав на странице:

Код


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

Это сообщение отредактировал(а) Nicholas_S - 19.10.2006, 16:14

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

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

AKS

Дата 19.10.2006, 16:37 (ссылка)

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

Загрузка ...

Участник форума

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

Репутация: 27
Всего: 52

Nicholas_S,

Цитата

изысканность определяется не только размером

Да бог с ней, с изысканостью! Тут есть еще кое-что - ведь нужно эмулировать и возможность использования булева параметра, который есть в оригинальном методе. Я вот думал, думал - ничего не придумал. А Вы знаете, как это сделать?

katka

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

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

Загрузка ...

Бывалый

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

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

Nicholas_S, ну ладно. первая строчка — это просто проверка на браузер, так ведь? а вот чего там дальше..
ну, давай. объясняй, матроскин ) что такое, во-первых, этот HTMLElement и его prototype? или давай на обучающую тему по е-мейл пообщаемся, что ли? а то развели тут учебный класс smile

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

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

Nicholas_S

Дата 19.10.2006, 19:22 (ссылка)

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

Загрузка ...

Опытный

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

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

AKS, параметр подразумевает, что все дочерние объекты будут включать свои собственные обработчики событий. Теоретически, можно реализовать. Если возникнет необходимость - дай знать, попробуем что-нибудь придумать.

katka, если есть желание - давай электропочтой. Какой ты там говоришь у тебя ящик? smile

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

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

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