Evénement jQuery click sur l'espace vide

J'essaie d'intercepter un événement lorsqu'un utilisateur clique sur un espace vide de la page avec jQuery. Par exemple, permet de dire que vous avez les éléments suivants:Evénement jQuery click sur l'espace vide

<html> 
<head> 
    <title>Test</title> 
</head> 
    <body> 
     <p>Here's some text!</p> 
    <body> 
</html>

Je veux attraper l'événement lorsque l'utilisateur clique sur quoi que ce soit, mais la balise p.

Y at-il un moyen d'attraper quelque chose comme ça?

Source

2009-08-21 Adam Mika

Je suis intéressé de savoir pourquoi vous voulez ce comportement? –

Je crée une petite application web similaire à Taskpaper (pour Mac) et je veux qu'elle imite le comportement de l'application. Plus d'une preuve de concept que toute autre chose. –

Cela fonctionne en chrome. N'a pas essayé d'autres navigateurs. Les travaux de l'idée que stickmangumby avait:

$('body').click(function (e) { 
    if (e.target == this) 
     alert('works'); 
});

Source

2009-08-21 02:47:33 MacAnthony

Ahh, j'ai tout oublié de l'attribut target. Cela correspond parfaitement à ce que j'ai déjà. Toutes les autres réponses fonctionnent aussi, je pense juste que celui-ci est le meilleur pour juste manipuler l'événement de manipuler des clics sur le corps (ou dans mon cas, le niveau de balise html) –

Je veux juste souligner que ceci ne fonctionnera pas pour chaque point de l'écran à moins que soit au moins égal à 100% de la largeur et de la hauteur de la fenêtre. –

correct, c'est pourquoi je l'ai changé du sélecteur $ ('body') au sélecteur $ ('html') dans mon code pour éviter de changer manuellement la hauteur et la largeur du corps. –

Vous pouviez observer le document pour onclick, puis vérifier event.currentTarget dans votre fonction de gestion d'événements.

Source

2009-08-21 02:27:17 nfm

Vous pouvez faire quelque chose comme ça (je pense)

$('body').not('p').click(function(){});

Je ne sais pas comment cela fonctionnera, cependant.

Source

2009-08-21 02:27:45 theIV

Je crois que cela va juste filtrer le sélecteur et n'influencera pas l'événement de claquement. – MacAnthony

Cool. Au moins j'ai appris quelque chose de ça! :) Je vous remercie. – theIV

Cela semble fonctionner:

$(function() { 
    $('body').click(function() { 
     alert('clicked the page'); 
     return false; 
    }); 
    $('*:not(body)').click(function() { 
     alert('clicked an item!'); 
     return false; 
    }); 
});

Un « problème » que vous aurez est que les paragraphes sont des éléments de bloc par défaut, en cliquant donc sur le côté d'une phrase produira un article cliquez même si elle ressemble comme si vous n'aviez pas cliqué sur un élément.

Source

2009-08-21 02:34:30

Je fais une petite application web qui est similaire à TaskPaper (pour Mac) et je veux qu'il mimer le comportement de l'application. Plus d'une preuve de concept qu'autre chose

À la lumière de vos commentaires, je ne m'inquiéterais pas spécifiquement du corps alors. Au lieu de cela, câbler un div afin que vous puissiez contraindre la zone que vous voulez réagir aux événements. Dans le cas où il n'y a pas d'autres éléments sur la page, c'est la même chose. Pour ce que ça vaut, sur n'importe quelle page Web, vos utilisateurs vous détesteraient si le fait de cliquer sur un espace quelconque faisait quelque chose - ce serait une mauvaise expérience de l'interface utilisateur.

Source

2009-08-21 03:23:06

Je pense que cela dépend beaucoup de ce qu'il prévoit de faire quand l'événement se déclenche. C'est assez présomptueux de dire que ce qu'il fait est mauvais si vous ne savez pas ce qu'il fait. – MacAnthony

Ah mais j'ai demandé pourquoi et j'ai une bonne idée de ce qu'il essaie de faire, c'est pourquoi il est préfacé par "à la lumière de vos commentaires". Je pense aussi que c'est une mauvaise idée de s'accrocher à l'événement body-click, même si c'est une preuve de concept. –

"vos utilisateurs vous détesteraient si vous cliquez sur n'importe quel espace où que ce soit fait quelque chose - ce serait une mauvaise expérience utilisateur" En fait, c'est exactement ce que fait Taskpaper. Partout où vous cliquez dans la fenêtre principale, vous entrez dans une nouvelle tâche ou vous modifiez quelque chose qui est déjà affiché à l'écran. –

Je cherchais la solution d'un problème similaire - cacher une info-bulle personnalisée en cliquant sur le document, mais pas en cliquant à l'intérieur de la pointe. Je l'ai fait comme ceci (a changé le sélecteur pour correspondre à la question):

$(document).bind('click', function(e) { 
    if($(e.target).closest('p').length == 0) { 
     //p is not clicked. do your stuff here 
    } 
});

Source

2011-07-17 09:14:36 bobef

Evénement jQuery click sur l'espace vide

Répondre

Questions connexes