Cliquez sur Ligne entière (en conservant le clic du milieu et ctrl + clic)

Question

J'ai un tableau HTML avec un lien dans la première colonne. Je veux permettre à l'utilisateur de cliquer n'importe où dans la ligne pour activer le lien. En même temps, je tiens à préserver le milieu et cliquez sur ctrl+cliquez sur la fonctionnalité de l'ouverture d'un nouvel onglet/fenêtre. Voici un exemple de la table:

<table id="row_link"> 
  <tbody> 
    <tr>
      <td><a href="link1.html">link</a></td> 
      <td>info 1</td> 
    </tr>       
    <tr>
      <td><a href="link2.html">link</a></td> 
      <td>info 2</td> 
    </tr>       
  </tbody> 
</table>

À l'aide de jQuery, je peux permettre à l'utilisateur de gauche, cliquez n'importe où sur une ligne:

$("table#row_link tbody tr").click(function () {
    window.location = $(this).find("a:first").attr("href");
});

Bien sûr, cela désactive le standard moyen et cliquez sur ctrl+cliquez sur la fonctionnalité de l'ouverture d'un nouvel onglet. Est-il une meilleure façon de permettre aux utilisateurs de cliquer sur la totalité de la ligne, tout en préservant la norme du milieu et cliquez sur ctrl+cliquez comportement?

Answer 1

Malheureusement, il n'existe aucun moyen pour simuler un lien et tous les comportements associés dans chaque navigateur. Par conséquent, la seule façon d'obtenir ce que vous voulez est d'avoir un lien qui suit le curseur autour de l' <tr> élément; ce lien serait invisible donc, pour l'utilisateur, on dirait qu'ils vont en cliquant sur l' <tr> , mais ils sont en fait en cliquant sur un lien caché. En utilisant cette méthode, le bouton du milieu, ctrl+clic et tous les autres comportements sont laissés intacts!

Voici une DÉMO: http://jsbin.com/ufugo

Et voici le code:

$("table tr").each(function(){

    var $link = $('a:first', this).clone(true),
        dim = {
            x: [
                $(this).offset().left,
                $(this).offset().left + $(this).outerWidth()
            ],
            y: [
                $(this).offset().top,
                $(this).offset().top + $(this).outerHeight()
            ]
        }

    $link
        .click(function(){
            $(this).blur();
        })
        .css({
            position: 'absolute',
            display: 'none',
            // Opacity:0  means it's invisible
            opacity: 0
        })
        .appendTo('body');

    $(this).mouseover(function(){
        $link.show();
    });

    $(document).mousemove(function(e){
        var y = e.pageY,
            x = e.pageX;
        // Check to see if cursor is outside of <tr>
        // If it is then hide the cloned link (display:none;)
        if (x < dim.x[0] || x > dim.x[1] || y < dim.y[0] || y > dim.y[1]) {  
            return $link.hide();
        }
        $link.css({
            top: e.pageY - 5,
            left: e.pageX - 5
        })
    });

});

EDIT:

J'ai créé un plugin jQuery à l'aide d'un peu mieux l'approche que ci-dessus: http://james.padolsey.com/javascript/table-rows-as-clickable-anchors/

Answer 2

MODIFIER

C'est simple problème qui a une solution simple. Je ne vois pas un besoin pour de vilaines hacks qui pourrait casser sur certains navigateurs, ou prendre le temps de traitement. Surtout parce qu'il s'agit d'un pur et simple CSS solution.

D'abord voici une démo

Inspiré par @Nick solution pour très semblable à la question, je propose un simple css+jquery solution.

Tout d'abord, voici le mini-plugin que j'ai écrit. Le plugin va envelopper toutes les cellules avec un lien:

jQuery.fn.linker = function(selector) {
    $(this).each(function() {
        var href = $(selector, this).attr('href');
        if (href) {
            var link = $('<a href="' + $(selector, this).attr('href') + '"></a>').css({
                'text-decoration': 'none',
                'display': 'block',
                'padding': '0px',
                'color': $(this).css('color')
            })
            $(this).children()
                   .css('padding', '0')
                   .wrapInner(link);
        }
    });
};

Et voici un exemple d'utilisation:

$('table.collection tr').linker('a:first');

Et Tous les CSS dont vous avez besoin:

table.collection {
    border-collapse:collapse;
}

C'est aussi simple que cela.

---

Vous pouvez utiliser l'événement objet de vérifier la souris cliquez sur le type. Cet article est de discuter d'un problème similaire.

De toute façon, voici comment faire:

$("table#row_link tbody tr").click(function () {

    if((!$.browser.msie && e.button == 0) || ($.browser.msie && e.button == 1)){
        if (!e.ctrlKey) {
            // Left mouse button was clicked without ctrl
            window.location = $(this).find("a:first").attr("href");
        }
    }
});

Answer 3

J'attaque ce à partir de pages HTML/css côté. Cette habitude d'être un problème courant lors de la plupart des sites ont tous de mise en page en tableaux.

D'abord de rendre le contenu de toutes les cellules d'un tableau en liens. Si vous ne voulez pas qu'ils ressemblent à des liens que vous pouvez utiliser CSS pour supprimer le soulignement de la " non lien de cellules. Mais ils seront des liens, ce qui est sémantiquement ce que vous voulez de toute façon.

Ensuite, vous voulez faire le lien s'étendre à remplir l'intégralité de la cellule. StackOverflow connaît déjà la réponse à cette:

td a { display: block; width: 100%; height: 100%; line-height: 100%; }

Avec une table classique, sans espaces entre les cellules de l'ensemble de la ligne sera cliquable. Et puisqu'il s'appuie sur les pas de trucs ou d'un navigateur spécifique hacks il devrait fonctionner partout.

Answer 4

Tu veux ça:

 $('table#row_link tbody tr').mousedown( function(e){
	if(e.ctrlKey || (!$.browser.msie && e.button == 1) || ($.browser.msie && e.button == 4)){
		//middle mouse button or ctrl+click
	} else {
		//normal left click
	}
});
 

Ceci est testé dans FF3.0.10, Chrome 1.0 et IE6. J'utilise l'événement mousedown car ni firefox ni IE ne passent le clic du bouton central de la souris à un événement .click (fn).

Answer 5

Vous pouvez saisir l'événement et regarder son code d'événement. Mais il n'y a aucun moyen réel de savoir quel est le comportement d'un navigateur pour ces événements.