{"id":99,"date":"2011-09-13T00:07:00","date_gmt":"2011-09-13T00:07:00","guid":{"rendered":"http:\/\/behstant.com\/blog\/?p=99"},"modified":"2012-04-19T13:42:25","modified_gmt":"2012-04-19T19:42:25","slug":"detectar-click-fuera-de-un-elemento-con-jquery","status":"publish","type":"post","link":"http:\/\/behstant.com\/blog\/web2-0\/detectar-click-fuera-de-un-elemento-con-jquery\/","title":{"rendered":"Detectar Click fuera de un Elemento con jQuery"},"content":{"rendered":"

El otro d\u00eda de encontraba con un compa\u00f1ero de trabajo que estaba batallando para manipular un evento en un dropdown men\u00fa que habia hecho,
\ny el problema era que quer\u00eda que una vez que le daba click en el men\u00fa y se expad\u00eda al hacer click fuera de este elemento este se volviera
\na colapsar. Hay muchos lugares que presentaban un soluci\u00f3n aparente pero aqui muestro un c\u00f3digo que puede funcionar para muchos casos.<\/p>\n

$('html').click(function() {\r\n\u00a0\u00a0\u00a0 \/* Aqui se esconden los menus que esten visibles*\/\r\n});\r\n\r\n$('#dropList').click(function(e){\r\n\u00a0\u00a0\u00a0 \/* Mostrar nuestro men\u00fa*\/\r\n\u00a0\u00a0\u00a0 e.stopPropagation();\r\n});<\/pre>\n
El c\u00f3digo es muy simple pero la mag\u00eda que hace jQuery es genial. Si se le da click en un html cualquiera se va a esconder el men\u00fa, as\u00ed que para evitar esto
\nen nuestro elemento detenemos esta acci\u00f3n con stopPropagation()<\/span>. Aqu\u00ed lo que estamos haciendo en realidad es que estamos manipulando eventos.<\/p>\n
El primer evento que sucede es el click de nuestro selector ‘html’, entonces si le damos click en ‘#dropList’ el primer evento en responder es el de mayor jeraqu\u00eda que es ‘html’, entonces se corre el metodo de esconder el men\u00fa.<\/p>\n
En el segundo evento si le damos click en ‘#dropList’ se va a esconder aunque este no se encuentre visible y para indicarle que este elemento es el que queremos usar, detenemos la ejecuci\u00f3n de eventos padre con stopPropagation()<\/span> y ejecutamos el de nuestro elemento ‘#dropList’.<\/p>\n
No hay mucha ciencia pero si se desea mas informacrion de stopPropagation() <\/span>pueden consultarla aqu\u00ed<\/a>. \ud83d\ude00<\/p>\n","protected":false},"excerpt":{"rendered":"
El otro d\u00eda de encontraba con un compa\u00f1ero de trabajo que estaba batallando para manipular un evento en un dropdown men\u00fa que habia hecho, y el problema era que quer\u00eda que una vez que le daba click en el men\u00fa y se expad\u00eda al hacer click fuera de este elemento este se volviera a colapsar. … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":""},"categories":[25,24],"tags":[],"class_list":["post-99","post","type-post","status-publish","format-standard","hentry","category-jquery","category-web2-0"],"yoast_head":"\nDetectar Click fuera de un Elemento con jQuery » The Code<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/behstant.com\/blog\/web2-0\/detectar-click-fuera-de-un-elemento-con-jquery\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Detectar Click fuera de un Elemento con jQuery » The Code\" \/>\n<meta property=\"og:description\" content=\"El otro d\u00eda de encontraba con un compa\u00f1ero de trabajo que estaba batallando para manipular un evento en un dropdown men\u00fa que habia hecho, y el problema era que quer\u00eda que una vez que le daba click en el men\u00fa y se expad\u00eda al hacer click fuera de este elemento este se volviera a colapsar. ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/behstant.com\/blog\/web2-0\/detectar-click-fuera-de-un-elemento-con-jquery\/\" \/>\n<meta property=\"og:site_name\" content=\"The Code\" \/>\n<meta property=\"article:published_time\" content=\"2011-09-13T00:07:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2012-04-19T19:42:25+00:00\" \/>\n<meta name=\"author\" content=\"Reedyseth\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@Reedyseth\" \/>\n<meta name=\"twitter:site\" content=\"@Reedyseth\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Reedyseth\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/behstant.com\/blog\/web2-0\/detectar-click-fuera-de-un-elemento-con-jquery\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/behstant.com\/blog\/web2-0\/detectar-click-fuera-de-un-elemento-con-jquery\/\"},\"author\":{\"name\":\"Reedyseth\",\"@id\":\"https:\/\/behstant.com\/blog\/#\/schema\/person\/760327e1ee480ad2aabe8e40d784ec9f\"},\"headline\":\"Detectar Click fuera de un Elemento con jQuery\",\"datePublished\":\"2011-09-13T00:07:00+00:00\",\"dateModified\":\"2012-04-19T19:42:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/behstant.com\/blog\/web2-0\/detectar-click-fuera-de-un-elemento-con-jquery\/\"},\"wordCount\":249,\"commentCount\":11,\"articleSection\":[\"jQuery\",\"Web2.0\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/behstant.com\/blog\/web2-0\/detectar-click-fuera-de-un-elemento-con-jquery\/\",\"url\":\"https:\/\/behstant.com\/blog\/web2-0\/detectar-click-fuera-de-un-elemento-con-jquery\/\",\"name\":\"Detectar Click fuera de un Elemento con jQuery » The Code\",\"isPartOf\":{\"@id\":\"https:\/\/behstant.com\/blog\/#website\"},\"datePublished\":\"2011-09-13T00:07:00+00:00\",\"dateModified\":\"2012-04-19T19:42:25+00:00\",\"author\":{\"@id\":\"https:\/\/behstant.com\/blog\/#\/schema\/person\/760327e1ee480ad2aabe8e40d784ec9f\"},\"breadcrumb\":{\"@id\":\"https:\/\/behstant.com\/blog\/web2-0\/detectar-click-fuera-de-un-elemento-con-jquery\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/behstant.com\/blog\/web2-0\/detectar-click-fuera-de-un-elemento-con-jquery\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/behstant.com\/blog\/web2-0\/detectar-click-fuera-de-un-elemento-con-jquery\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/behstant.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Detectar Click fuera de un Elemento con jQuery\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/behstant.com\/blog\/#website\",\"url\":\"https:\/\/behstant.com\/blog\/\",\"name\":\"The Code\",\"description\":\"Learn Web Solutions in WordPress, PHP, jand also purchase code solutions.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/behstant.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/behstant.com\/blog\/#\/schema\/person\/760327e1ee480ad2aabe8e40d784ec9f\",\"name\":\"Reedyseth\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/117af509aa15be89968fe955258a7bf8ed362ec2adf1afcf2af50a976f2349fa?s=96&r=g\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/117af509aa15be89968fe955258a7bf8ed362ec2adf1afcf2af50a976f2349fa?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/117af509aa15be89968fe955258a7bf8ed362ec2adf1afcf2af50a976f2349fa?s=96&r=g\",\"caption\":\"Reedyseth\"},\"description\":\"My Google Profile+\",\"sameAs\":[\"http:\/\/behstant.com\"],\"url\":\"http:\/\/behstant.com\/blog\/author\/reedyseth\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Detectar Click fuera de un Elemento con jQuery » The Code","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/behstant.com\/blog\/web2-0\/detectar-click-fuera-de-un-elemento-con-jquery\/","og_locale":"en_US","og_type":"article","og_title":"Detectar Click fuera de un Elemento con jQuery » The Code","og_description":"El otro d\u00eda de encontraba con un compa\u00f1ero de trabajo que estaba batallando para manipular un evento en un dropdown men\u00fa que habia hecho, y el problema era que quer\u00eda que una vez que le daba click en el men\u00fa y se expad\u00eda al hacer click fuera de este elemento este se volviera a colapsar. ... Read more","og_url":"https:\/\/behstant.com\/blog\/web2-0\/detectar-click-fuera-de-un-elemento-con-jquery\/","og_site_name":"The Code","article_published_time":"2011-09-13T00:07:00+00:00","article_modified_time":"2012-04-19T19:42:25+00:00","author":"Reedyseth","twitter_card":"summary_large_image","twitter_creator":"@Reedyseth","twitter_site":"@Reedyseth","twitter_misc":{"Written by":"Reedyseth","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/behstant.com\/blog\/web2-0\/detectar-click-fuera-de-un-elemento-con-jquery\/#article","isPartOf":{"@id":"https:\/\/behstant.com\/blog\/web2-0\/detectar-click-fuera-de-un-elemento-con-jquery\/"},"author":{"name":"Reedyseth","@id":"https:\/\/behstant.com\/blog\/#\/schema\/person\/760327e1ee480ad2aabe8e40d784ec9f"},"headline":"Detectar Click fuera de un Elemento con jQuery","datePublished":"2011-09-13T00:07:00+00:00","dateModified":"2012-04-19T19:42:25+00:00","mainEntityOfPage":{"@id":"https:\/\/behstant.com\/blog\/web2-0\/detectar-click-fuera-de-un-elemento-con-jquery\/"},"wordCount":249,"commentCount":11,"articleSection":["jQuery","Web2.0"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/behstant.com\/blog\/web2-0\/detectar-click-fuera-de-un-elemento-con-jquery\/","url":"https:\/\/behstant.com\/blog\/web2-0\/detectar-click-fuera-de-un-elemento-con-jquery\/","name":"Detectar Click fuera de un Elemento con jQuery » The Code","isPartOf":{"@id":"https:\/\/behstant.com\/blog\/#website"},"datePublished":"2011-09-13T00:07:00+00:00","dateModified":"2012-04-19T19:42:25+00:00","author":{"@id":"https:\/\/behstant.com\/blog\/#\/schema\/person\/760327e1ee480ad2aabe8e40d784ec9f"},"breadcrumb":{"@id":"https:\/\/behstant.com\/blog\/web2-0\/detectar-click-fuera-de-un-elemento-con-jquery\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/behstant.com\/blog\/web2-0\/detectar-click-fuera-de-un-elemento-con-jquery\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/behstant.com\/blog\/web2-0\/detectar-click-fuera-de-un-elemento-con-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/behstant.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Detectar Click fuera de un Elemento con jQuery"}]},{"@type":"WebSite","@id":"https:\/\/behstant.com\/blog\/#website","url":"https:\/\/behstant.com\/blog\/","name":"The Code","description":"Learn Web Solutions in WordPress, PHP, jand also purchase code solutions.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/behstant.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/behstant.com\/blog\/#\/schema\/person\/760327e1ee480ad2aabe8e40d784ec9f","name":"Reedyseth","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/117af509aa15be89968fe955258a7bf8ed362ec2adf1afcf2af50a976f2349fa?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/117af509aa15be89968fe955258a7bf8ed362ec2adf1afcf2af50a976f2349fa?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/117af509aa15be89968fe955258a7bf8ed362ec2adf1afcf2af50a976f2349fa?s=96&r=g","caption":"Reedyseth"},"description":"My Google Profile+","sameAs":["http:\/\/behstant.com"],"url":"http:\/\/behstant.com\/blog\/author\/reedyseth\/"}]}},"_links":{"self":[{"href":"http:\/\/behstant.com\/blog\/wp-json\/wp\/v2\/posts\/99","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/behstant.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/behstant.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/behstant.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/behstant.com\/blog\/wp-json\/wp\/v2\/comments?post=99"}],"version-history":[{"count":0,"href":"http:\/\/behstant.com\/blog\/wp-json\/wp\/v2\/posts\/99\/revisions"}],"wp:attachment":[{"href":"http:\/\/behstant.com\/blog\/wp-json\/wp\/v2\/media?parent=99"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/behstant.com\/blog\/wp-json\/wp\/v2\/categories?post=99"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/behstant.com\/blog\/wp-json\/wp\/v2\/tags?post=99"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}