Получить jQuery click, context (this) для вывода одного объекта, а не нескольких - PullRequest
0 голосов
/ 01 февраля 2012

Так я и делаю:

    $('.divs').bind('click', function()
    {
         console.log("clicked " +$(this).text());
    }

О

    <DIV class="divs" id="parent1">Dad
      <DIV class="divs" id="child1">Kid1</DIV>
      <DIV class="divs" id="child2">Kid2</DIV>
    </DIV>

Затем я получаю несколько выходов, когда нажимаю на child1, например:

"Clicked Kid1"

"нажал DadKid1Kid2"

на моей консоли

Только когда я нажимаю на «самый родительский» div, я получаю один вывод. Все это довольно логично, но я бы хотел выбрать только «самый ребенок»?

Ответы [ 2 ]

4 голосов
/ 01 февраля 2012

Остановите распространение события click, используя event.stopPropagation.

$('.divs').bind('click', function(event)
{
     event.stopPropagation();
     console.log("clicked " +$(this).text());
});

Обратите внимание, что я добавил event в качестве аргумента для анонимной функции обработчика событий.

Когда вы щелкаете по элементу, он запускает событие click, затем это событие всплывает DOM вплоть до элемента document, вызывая событие click для каждого элемента-предка от первоначальной цели до элемента document. Однако мы можем остановить распространение этого события.

Вы также можете return false;, который в обработчике событий jQuery будет event.preventDefault() и event.stopPropagation().

$('.divs').bind('click', function()
{
     console.log("clicked " +$(this).text()); 
     return false;
});

Некоторая документация для тебя:

Вот демоверсия: http://jsfiddle.net/P5tXP/

0 голосов
/ 01 февраля 2012

Вы можете перейти на этот сайт
http://www.quirksmode.org/js/events_order.html

события в javascript проходят через 3 фазы захвата, на цели и пузыри.

, если вы хотите обрабатывать только на цели
Вы можете сделать что-то вроде этого

function handler(event){

  event.stopPropagation(); //cancel bubble for IE ,stops bubbling phase

  ele = event.target | event.srcElement;

  if(ele.id == "child1"){
     // your code
  }
}


you can also try using currentTarget and this in handler ..
...