Home > Web Front-end > JS Tutorial > jQuery click anywhere except specified area to hide DIV function

jQuery click anywhere except specified area to hide DIV function

韦小宝
Release: 2018-01-08 10:52:45
Original
1667 people have browsed it

This article mainly introduces jQuery Related information hidden by clicking anywhere except the designated area. The code is simple and easy to understand, very good, and has the value of reference and learning jquery. Friends who are interested in jquery You can refer to this article

The specific code is as follows:


$('body').click(function(e) {
  var target = $(e.target);
  // 如果#overlay或者#btn下面还有子元素,可使用
  // !target.is('#btn *') && !target.is('#overlay *')
  if(!target.is('#btn') && !target.is('#overlay')) {
    if ( $('#overlay').is(':visible') ) { 
      $('#overlay').hide();                          
    }
  }
});
Copy after login


or


$('body').click(function(e) {
  if(e.target.id != 'btn' && e.target.id != 'overlay')
   if ( $('#overlay').is(':visible') ) {
     $('#overlay').hide();
   }
})
Copy after login


PS: Let’s look at a piece of code jquery. Click on other places except itself to hide


$("#test").click(function(e) { 
  e?e.stopPropagation():event.cancelBubble = true; 
}); 
$(document).click(function() { 
  $("#test").fadeOut(); 
<pre name="code" class="html">e?e.stopPropagation():event.cancelBubble = true;  为阻止冒泡事件
});
 

Copy after login


Summary

The above is the jQuery introduced by the editor to hide p by clicking anywhere except the specified area. I hope to be helpful! !

Related recommendations:

Jquery clicks the button to submit the form asynchronously and synchronously

jQuery clicks the input to move the cursor to the last or specified position

jQuery clicks on the input box to display the verification code image

The above is the detailed content of jQuery click anywhere except specified area to hide DIV function. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template