Symulowanie kliknięcia łącza w JavaScript/jQuery, który daje normalne zachowanie przeglądarki

Question

Teraz mam następujący kod:

<script> 
$("#clickme").click(function(){ 
    $("#clicker").click(); 
}); 
</script> 
<div id="clickme" style="height:20em; width:20em;"> 
    <a id="clicker" href="http://www.google.com"> Link </a> 
</div> 

Skutecznie, jeśli klikniesz gdziekolwiek na div tła, javascript będzie symulować kliknij właściwy link i przejdź do strony docelowej.

Jednak to nie działa tak dobrze, gdy próbujesz kliknąć, przytrzymując klawisz Ctrl, ponieważ przeglądarka nie otworzy nowej karty, a zamiast tego po prostu wczytuje adres URL do bieżącego okna.

Zamiast tego zachowania, chcę mieć normalne zachowanie przeglądarki (tzn. Otworzyć nową kartę, nie zmieniać bieżącego okna dla kliknięcia z naciśniętym klawiszem Ctrl) po kliknięciu tła. Czy istnieje sposób to zrobić w JavaScript/jQuery?

Wolałbym nie próbować wykrywać wciśniętego klawisza "ctrl" - jest kilka podobnych przypadków i wolałbym mieć rozwiązanie, które rozwiązuje wszystko, zamiast próbować złapać każdy taki przypadek.

Answer 1

funkcję, która będzie zrobić (albo nowe okno lub kartę, której nie można kontrolować) ...

function open_url(url) { 
    if (flag) { 
     window.open(url, '_blank'); 
     window.focus(); 
    } else { 
     window.location.href = url; 
    } 
} 

Oczywiście, trzeba uchwycić Ctrl przyciśnięcie ...

$(window).keypress(function(event) { 
    if (event.ctrlKey) { 
     // set flag 
     flag = true; 
    } else { 
     // unset flag 
     flag = false; 
    } 
}); 

Answer 2

wiem, że to nie jest javascript, ale myślę, że dobrym rozwiązaniem byłoby wykorzystanie absolutnie umieszczony link i ustawienie jej z-index do ujemnej liczby tak, że kliknięcie na zawartość w div nie trafi do link. (chyba, że ​​nie jest to pożądane, niż po prostu zignoruj ​​indeks Z). Kliknięcie tła div zadziała jak zwykły link. Zobacz ten fiddle

Oto HTML

<div id="clickme"><a id="clicker" href="http://suu.edu"></a><p>text text</p></div> 

I CSS

#clickme{ 
    position: relative; 
    width: 500px; 
    height: 500px; 
    border: 1px solid #000; 
    z-index: 1; 
} 

#clicker{ 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    z-index: -1; 
} 

Można zmienić cursor z CSS, jeśli nie ma to wyglądać div jest link .