Как узнать имя объекта по которому кликнули? Событие click() jQuery

[Bloomerwd]

Здравствуйте ув. пользователи данного форума.

У меня возник вопрос..

Какими средствами узнать имя объекта на который кликнул пользователь?

Заранее благодарю.

[lexxcode]

Для чего конкретно это нужно?

[Bloomerwd]

Есть меню, которое по кнопке выезжает. Кнопка в два действия - открыть/закрыть меню, но нужно сделать так если юзер кликнул вне меню оно закрылось, сейчас сделал событие на body, то есть клик в любой части окна браузера закрывает меню.

[Zverushka]

$(".menu").click(function(event){

     event.stopPropagation();

});

Должно заработать.

Edited December 1, 2013 by Zverushka

[lexxcode]

Как-то так: http://jsfiddle.net/alexriz/6duTt/

 

Общую идею, думаю, поймешь

[Bloomerwd]

Не работает.

Вот код:

$('body').click(function(){	if($('.left_column').css('left') == "0px"){		$('.left_column').animate({left: "-220px"},300,'easeInSine');	}});$('.left_column').click(function(event){	event.stopPropagation();	if($(this).css('left') == "0px"){		$(this).animate({left: "-220px"},300,'easeInSine');	}	else{		$(this).animate({left: "0px"},300,'easeInSine');	}});

[lexxcode]

Вот так сделай:

$('.left_column').click(function(event){	if($(this).css('left') == "0px"){		$(this).animate({left: "-220px"},300,'easeInSine');	}	else{		$(this).animate({left: "0px"},300,'easeInSine');	}});$(document).on({    click : function(e) {        if($(e.target).closest('.menu').length === 0) {            $('.left_column').animate({left: "-220px"},300,'easeInSine');        }    }});

.menu обертка твоей менюшки, ну или что там у тебя

[Zverushka]

Потому что if и елсе у тебя перепутались местами. а так все работает http://jsfiddle.net/6duTt/10/

[Bloomerwd]

Когда меню "развернуто" все работает, но иначе нет.

[lexxcode]

Zverushka, не путай человека все у него с условиями правильно

 

Bloomerwd, можешь кинуть свой пример меню так же на http://jsfiddle.net/ ?

[Bloomerwd]

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

alexriz, да, минуточку.

[Zverushka]

Ну а что надо - чтобы меню уезжало при клике по нему и при клике по боди? Тогда в чем смысл? Тогда и event.stopPropagation не нужен

[Bloomerwd]

alexriz, вот http://jsfiddle.net/kDN4P/

Zverushka, нужно чтоб по кнопке меню открывалось и закрывалось, если меню открыто и юзер кликает вне меню, оно закрывается

[lexxcode]

Вот http://jsfiddle.net/wK2XT/

[Zverushka]

Так то не пашет, потому что боди мелкое. надо на 100% растянуть.

[lexxcode]

Мой вариант работает и ничего не нужно растягивать

[Bloomerwd]

alexriz, спасибо большое, все работает   

[Zverushka]

 @alexriz, а можно логику первой части объяснить, я что-то не просекаю)

[Bloomerwd]

Zverushka, на сколько я понял,

if(!$(e.target).is('.action_left_column') - если не один из объектов не является .action_left_column

&& $(e.target).closest('.left_column').length === 0) - и найденный из всех, left_column равен 0

Вроде так 

Edited December 1, 2013 by Bloomerwd

[lexxcode]

$(document).on({

    // Вешаем событие на document

    // e - объект события

    // e.target - указывает на элемент по которому кликнули

    click : function(e) {

        // Если e.target не кнопка переключатель и не выезжающее меню,

        // то закрываем .left_column

        if(!$(e.target).is('#action') && $(e.target).closest('.left_column').length === 0) {

            $('.left_column').animate({left: "-90px"},300);

        }

    }

});

[Zverushka]

Может тогда над не is, a hasClass использовать, ведь 

[lexxcode]

hasClass'ом ты не проверишь по id селектору, ну и в целом is() банально удобнее.

 

А разница между hasClass() и is() в подавляющем большинстве случаев экономия на спичках, так что можно пользовать удобный is() и не париться

[Zverushka]

И получается, что каждый клик по странице будет перебирать все ветку дерева пределах ребенок-родитель $(e.target).closest('.left_column').? Это ведь тоже не очень хорошо? В другом же методе обрабатывается чисто 2 события - клик по странице и остановка всплытия события меню.

П.С. И я не прикапываюсь, я просто так изучаю програмированние, рассуждая) Метод, конечно, очень интересный.

Edited December 1, 2013 by Zverushka

[lexxcode]

И получается, что каждый клик по странице будет перебирать все ветку дерева пределах ребенок-родитель $(e.target).closest('.left_column').? Это ведь тоже не очень хорошо?

Да будет проверяться ветка, в данном случае мы можем добавить дополнительную проверку на предмет состояния менюшки. Если она и так закрыта, то можно и не проверять всю ветку. По поводу хорошо это или не очень. Давайте будем реалистами, если окажется столько уровней вложенности, что от этого перебора начнет тормозить браузер, то явно разработчик что-то сделал не так. Набрать, хотя бы, 3000 уровневую вложенность крайне затруднительно - это уже определенно не здорово со стороны разработчика, но для браузера это не так уж и много на самом деле.

 

Да можно избавиться от перебора и сделать так http://jsfiddle.net/alexriz/wK2XT/4/

Но кода стало больше и этот подход потенциально может помешать работе других скриптов, которым, возможно будет необходимо работать с этими элементами или их родителями

[Zverushka]

А такой странная форма записи click : function(e) { - это из jquery синтаксис или javascript?

[lexxcode]

А такой странная форма записи click : function(e) { - это из jquery синтаксис или javascript?

 

jQuery написан на javascript

 

Но вообще, да это сахар из jq