2013-01-05 14 views
6

In questo momento, ho il seguente codice:Simulazione un clic su un link in Javascript/jQuery che produce il normale comportamento del browser

<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> 

In effetti, se si fa clic in qualsiasi punto dello sfondo div, il Javascript simulerà un clicca sul link attuale e ti porta alla pagina di destinazione.

Tuttavia, questo non funziona molto bene quando si tenta di fare clic tenendo premuto il tasto Ctrl, poiché il browser non apre una nuova scheda e invece carica l'url nella finestra corrente.

Invece di questo comportamento, desidero avere il normale comportamento del browser (ad esempio, aprire una nuova scheda, non modificare la finestra corrente per un clic ctrl-clic) quando si fa clic sullo sfondo. C'è un modo per farlo in Javascript/jQuery?

Preferirei non provare a rilevare il tasto "ctrl" che è depresso - ci sono alcuni casi simili e preferirei avere una soluzione che risolva tutto piuttosto che cercare di cogliere ogni caso limite come questo.

+0

Considerare la lettura di questa domanda: http://stackoverflow.com/questions/7867329/jquery-open-url-in-new-tab –

risposta

2

Una funzione che farà questo (sia nuova finestra o scheda, non può controllare che) ...

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

Naturalmente, si dovrà catturare l'Ctrl pressione di un tasto ...

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

so che questo non è javascript, ma penso che una buona soluzione sarebbe quella di utilizzare un collegamento posizionato in modo assoluto e impostando il suo z-index ad un numero negativo in modo che cliccando sul contenuto nella div non andrà al collegamento. (a meno che ciò non sia desiderato, basta semplicemente ignorare lo z-index). Quindi facendo clic sullo sfondo del div si comporterà come un collegamento regolare. Vedere questo fiddle

Ecco l'HTML

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

E il 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; 
} 

è possibile modificare la cursor con i CSS, se non si vuole farlo sembrare come il div è un collegamento .

Problemi correlati