2011-07-22 24 views
5

HtmlJak dołączyć wywołanie zwrotne onclick do elementu div, ale nie do łącza wewnątrz elementu div?

<div class='item_container'> 

[...bunch of links and pictures...] 
<a class='item_owner'>John Doe</a> 

</div> 

JavaScript

/** 
    Bind the onclick only if you hover on the item since we got a lot 
    of items and several events and plugins to setup on them. 
*/ 
$('.item_container').live('mouseenter', function(e){ 
    $this = $(this); 
    if (!$this.data('isSetup')) { 
    $this.click(function(e){ 
     // do magic 
     return false; 
    }); 
    [... a lot of other stuff] 
    $this.data({'isSetup': true}); 
    } 
}); 

Oczywiście po kliknięciu w dowolnym miejscu na div, wykonuje 'czarować'. Dzięki return false, jeśli kliknę na dowolny link w div, nadal wykonuje "do magii" i nie zmienia strony, która jest oczekiwanym zachowaniem.

Ale istnieje jeden link, który ma faktycznie zmienić stronę, link właściciela. Problem polega na tym, że przy obecnym ustawieniu uniemożliwiłem mu działanie.

+0

to zrobić to samo, jeśli używasz 'e.preventDefault()'? – ianbarker

+0

sprawdź typ elementu kliknięty ... this.tagName. Jeśli jest linkiem, nie zwracaj fałszu ... – 2GDev

+0

@ 2GDev: utwórz tę odpowiedź. Jeśli to działa, dostaniesz rep –

Odpowiedz

4

Musisz zatrzymać propagację zdarzenia z linków do rodzica .item_container.

Dodaj ten blok kodu:

$('.item_container a.item_owner').live('click', function(e){ 
e.stopPropagation(); 
}); 
+0

Performance mądry $ ("div.item_container a.item_owner") będzie lepszym selektorem – MaMa

+0

To działałoby świetnie, gdybym nie miał innych odnośników w div, które nie powinny się zatrzymywać propagacja. Tylko link właściciela musi wywoływać zmianę strony. Inni nie powinni, a kliknięcie na nich powinno wykonywać "magię" tak jak reszta obszaru. –

+0

@ e-satis: Sprawdź zaktualizowaną odpowiedź. – Chandu

Powiązane problemy