Модераторы: Sardar, Aliance

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Привязать событие к клику за элементом 
:(
    Опции темы
taral
Дата 8.1.2009, 02:30 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

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



Доброго времени суток!
Бьюсь уже несколько часов чтобы осуществить такую штуку:
Есть элемент
Код

<div>aaa</div>

Мне нужно чтобы событие осуществлялось при клике на любом месте кроме этого  элемента.
Мне нужно это вот для каких целей.
Я делаю менюшку. Она открывается при клике. И закрывается если кликают на любом другом месте кроме ее самой.
PM MAIL   Вверх
ksnk
Дата 8.1.2009, 11:04 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386



Какой фреймворк используется?
Тут, вроде,обсуждали


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
Samotnik
Дата 8.1.2009, 18:26 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Super star !
****


Профиль
Группа: Awaiting Authorisation
Сообщений: 7192
Регистрация: 4.11.2006
Где: Минск City

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



taral, а в чем проблема ?
onclick еще никто не отменял  smile 
PM MAIL   Вверх
taral
Дата 8.1.2009, 21:41 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

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



Samotnik
onclick я могу привязать событие к элементу. А мне нужно ко всему кроме этого элемента.
ksnk
prototype

Я решил проблему таким образом. привязываю событие закрытия меню на onclick на объект window.document.
В событии по клику на раздел меню выполняю то что нужно и прерывается действие события new Event.stop(event)
Поскольку события выполняются по пирамиде (лучше не придумал как сказать...) сначала выполняется действие по клику на раздел меню и все, поскольку я прерываю все дальнейшие события.
В этом способе есть недостаток. Если мне не нужно прерывать все дальнейшие события, то этот способ не подходит=(

Добавлено через 1 минуту и 42 секунды
Может кто знает более доскональное решение. В данной ситуации мое решение меня устраивает, но человек обязан стремится к совершенству=)
PM MAIL   Вверх
Samotnik
Дата 9.1.2009, 01:44 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Super star !
****


Профиль
Группа: Awaiting Authorisation
Сообщений: 7192
Регистрация: 4.11.2006
Где: Минск City

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



Цитата(taral @  8.1.2009,  20:41 Найти цитируемый пост)
onclick я могу привязать событие к элементу. А мне нужно ко всему кроме этого элемента.

извини, невнимательно вот ето прочитал 
Цитата(taral @  8.1.2009,  01:30 Найти цитируемый пост)
при клике на любом месте кроме этого  элемента.

ну в принципе и в етом случае, проблема решается  smile 

PM MAIL   Вверх
taral
Дата 9.1.2009, 02:32 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

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



Цитата

ну в принципе и в етом случае, проблема решается

Ну да=) И я ее решил. 
Цитата

Я решил проблему таким образом. привязываю событие закрытия меню на onclick на объект window.document.
В событии по клику на раздел меню выполняю то что нужно и прерывается действие события new Event.stop(event)
Поскольку события выполняются по пирамиде (лучше не придумал как сказать...) сначала выполняется действие по клику на раздел меню и все, поскольку я прерываю все дальнейшие события.

И теперь спрашиваю возможно есть более лаконичное решение.

Это сообщение отредактировал(а) taral - 9.1.2009, 02:32
PM MAIL   Вверх
GZep
Дата 9.1.2009, 02:39 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


участник Винграда
***


Профиль
Группа: Завсегдатай
Сообщений: 1528
Регистрация: 7.7.2006
Где: Москва

Репутация: 1
Всего: 32



Цитата(taral @  8.1.2009,  21:41 Найти цитируемый пост)
Я решил проблему таким образом. привязываю событие закрытия меню на onclick на объект window.document.
В событии по клику на раздел меню выполняю то что нужно и прерывается действие события new Event.stop(event)
Поскольку события выполняются по пирамиде (лучше не придумал как сказать...) сначала выполняется действие по клику на раздел меню и все, поскольку я прерываю все дальнейшие события.
В этом способе есть недостаток. Если мне не нужно прерывать все дальнейшие события, то этот способ не подходит=(

не совсем тебя здесь понел, хотьи прочитал 2 раза smile тут вроде надо только отловить событие клика по документу и проверить "не на тот ли самый div был произведен клик".


--------------------
user posted imageuser posted image
PM MAIL WWW ICQ Skype GTalk   Вверх
taral
Дата 9.1.2009, 02:40 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

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



Всем спасибо. Прочитал ссылку ksnk. Все основано на похожем способе что предложил я. Всем спасибо за помощь.
PM MAIL   Вверх
GZep
Дата 9.1.2009, 02:41 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


участник Винграда
***


Профиль
Группа: Завсегдатай
Сообщений: 1528
Регистрация: 7.7.2006
Где: Москва

Репутация: 1
Всего: 32



где-то была на форуме большая тема про события onclick - там, помню, куча материала была по поводу действий при нажатии на ссылки. хотя, может там и нет ничего нужного...

Добавлено через 1 минуту и 10 секунд
taral, ну, так поделись своим решением с людьми - интерессно же smile и отметь тему как решенную.


--------------------
user posted imageuser posted image
PM MAIL WWW ICQ Skype GTalk   Вверх
taral
Дата 9.1.2009, 02:52 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

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



Цитата

не совсем тебя здесь понел, хотьи прочитал 2 раза smile тут вроде надо только отловить событие клика по документу и проверить "не на тот ли самый div был произведен клик"

Ну значит я высказался неясно, за что прошу прощения=)
Идея вот в чем.
Обычно привязывают событие на document  и проверяют если клик был на елементе div (пусть будет div =) ), то ничего не делают.
Вы сами это только что написали.
Я не знал как это делается и придумал свой способ (чем-то хуже чем-то лучше). 
На клик по меню у меня повешено событие (отправка данных на сервер.. и прерывание событий) И мне не нужно что бы меню закрывалось как раз при клике на нем. В других местах должно происходить закрытие.
Я повесил закрытие на document (нет никаких проверок, происходит клик в любом месте и происходит закрытие (скрываение если быть более точно) )
А при клике на меню происходит отправка, как я уже говорил и прерываются все дальнейшие события.

Что имеем в результате.
Клик в любом месте кроме меню - закрытие меню.
Клик на меню: вызывает 2-а события. По иерархии первым вызывается событие клика по меню. Оно выполняется и прерывает все последующие события. Потому события закрытия меню (что повешено на document ) не выполняется.
Результат тот же что и в другом решении (точнее в моем случае разницы нету)
Хух кажется расписал как смог=)
Не думаю что мой способ лучше (скорее наоборот) но зато отличается и придумал его я сам без подсказок=)

Это сообщение отредактировал(а) taral - 9.1.2009, 02:55
PM MAIL   Вверх
GZep
Дата 9.1.2009, 03:03 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


участник Винграда
***


Профиль
Группа: Завсегдатай
Сообщений: 1528
Регистрация: 7.7.2006
Где: Москва

Репутация: 1
Всего: 32



taral,  smile отлично, проигрыш в быстродействии принебрегаем.


--------------------
user posted imageuser posted image
PM MAIL WWW ICQ Skype GTalk   Вверх
taral
Дата 9.1.2009, 03:09 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

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



Цитата

отлично, проигрыш в быстродействии принебрегаем. 

Вы так говорите будто я пришел и сказал вот у меня есть лучшее решение. Используйте его.

Это была просто попытка решить задачу своими силами. Прочитав другие решения мне не показалось что они более быстрые. Значит не хватило знаний.
Но в моем случае мне все равно нужно делать прерывание событий при клике, поскольку иначе пользователь перейдет по ссылке. А мне этого не нужно. Но и ссылка должна присутствовать, чтобы поисковики могли через нее ходить (выходит что пользователь увидит результат аяксом, а поисковик перейдет на новую страницу с тем же результатом.)

Это сообщение отредактировал(а) taral - 9.1.2009, 03:11
PM MAIL   Вверх
GZep
Дата 10.1.2009, 00:17 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


участник Винграда
***


Профиль
Группа: Завсегдатай
Сообщений: 1528
Регистрация: 7.7.2006
Где: Москва

Репутация: 1
Всего: 32



Цитата(taral @  9.1.2009,  03:09 Найти цитируемый пост)
Прочитав другие решения мне не показалось что они более быстрые.

сами себе противоречите.
Цитата(taral @  9.1.2009,  02:52 Найти цитируемый пост)
Не думаю что мой способ лучше (скорее наоборот)




--------------------
user posted imageuser posted image
PM MAIL WWW ICQ Skype GTalk   Вверх
ksnk
Дата 10.1.2009, 01:40 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386



чего-то темы с меню уже немного достали. smile

Вот относительно несложная и достаточно корректная реализация меню для jQuery. Переписать ее на prototype, наверное, не составит большого труда. Это меню, в принципе позволяет даже несложно анимировать открытие-закрытие меню.
Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>

function menu (el,param){
    var self=$(el)[0]; 
    if(!param) param={};
    else if(typeof(param)=='function')
        param={show:param};
        
    function checkMouse (e){
        var el = e.target;
        while (true){
            if (el == self) {
                return true;
            } else if (el == document) {
                hide_menu();
                return false;
            } else {
                el = el.parentNode;
            }
        }
    };
    
    function show_menu(){
        if(param.show) param.show.apply(self);
        else $(self).show();
        $(document).bind('mousedown', checkMouse);
        return false;
    };
    
    function hide_menu(){
        $(document).unbind('mousedown', checkMouse);
        if(param.hide)
            param.hide.apply(self);
        else
            $(self).hide();
        return false;
    };
    self.show_menu=show_menu;
    self.hide_menu=hide_menu;
   // thinking about IE6 memory leak
    $(window).bind('unload',function(){self=null});
}

// setting menu up
$(function(){
   // setup menu tself
    $('.noanimate').each(function(){menu(this)});

   // setup menu tself
    $('.animate').each(function(){menu(this,{
        show:function(){
            $(this).show('normal');
        },
        hide:function(){
            $(this).hide('normal');
        }
    })});

   // setup menu triggers
    $('.toolable').each(function(){
      $(this).click(function(){
        $(this).find('div')[0].show_menu();
      })
    })
});

  </script>
</head>
<style>
.menu {
    display:none;
    background:white;
    padding:10px 20px; 
    border:1px solid gray;
    position:absolute;
    top:1.2em; left:0px;
    z-index:5;
}
.toolable {
  position: relative;
  float:left;
}
</style>
<body>

<div class="toolable">
<input type="text" >
  <div  class="menu noanimate" style="display:none;">
    Йа Минюшко<br>
    <a href="http://www.google.com">Гугель</a><br>
    Йа Минюшко
  </div>
</div>

<div class="toolable">
<input type="text" >
  <div  class="menu animate" style="display:none;">
    Йа Минюшко<br>
    <a href="http://www.google.com">Гугель</a><br>
    Йа Минюшко
  </div>
</div>
<div class="toolable">
<input type="text" >
  <div  class="menu noanimate" style="display:none;">
    Йа Минюшко<br>
    <a href="http://www.google.com">Гугель</a><br>
    Йа Минюшко
  </div>
</div>

<div class="toolable">
<input type="text" >
  <div  class="menu animate" style="display:none;">
    Йа Минюшко<br>
    <a href="http://www.google.com">Гугель</a><br>
    Йа Минюшко
  </div>
</div>
</body>
</html> 



Основная мысль: на элемент, представляющий собой меню, навешивается пара функций - открыть-закрыть. Тот, кому надо меню показать обязан найти элемент и вызвать его метод "show_menu".

Чего непонятно - можно спрашивать smile

P.S. Я отчего-то не люблю вставляться в jQuery'евские плагины...


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
taral
Дата 10.1.2009, 02:07 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

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



GZep
И где противоречия?
Быстрота это конечно хорошо.
Но быстрота не == лучше.
Когда я посмотрел другие решения. Мне они не показались более быстрыми. Я так и сообщил.
Но те решения проверенны временем и практикой. Мое же решение было написано на скорую руку.
Цитата
Не думаю что мой способ лучше (скорее наоборот)

Очень даже логично. Я не чувствую себя в javaScript как рыба в воде, я больше по серверным языкам. Потому я прекрасно понимаю что если мне кажется что решения одинаковые это не обязательно так. Так что вы сами тут что-то напутали..
И еще у меня к вам вопрос. Неужели прерывание события так сильно тормозит?

Добавлено @ 02:09
ksnk Спасибо. Обязательно посмотрю код.

Это сообщение отредактировал(а) taral - 10.1.2009, 02:10
PM MAIL   Вверх
Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: для новичков | Следующая тема »


 




[ Время генерации скрипта: 0.0611 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.