Jquery Click Anywhere in the Page Except on 1 Div

jQuery click anywhere in the page except on 1 div

You can apply click on body of document and cancel click processing if the click event is generated by div with id menu_content, This will bind event to single element and saving binding of click with every element except menu_content

$('body').click(function(evt){    
       if(evt.target.id == "menu_content")
          return;
       //For descendants of menu_content being clicked, remove this check if you do not want to put constraint on descendants.
       if($(evt.target).closest('#menu_content').length)
          return;             

      //Do processing of click event here for every element except with id menu_content

});

jQuery click anywhere except a div

Simply return from function if event.target is the div. Try the following way:

function clicking(s){  $(s).closest(".search_div").find(".country").val($(s).find(".txtcountry").text())  $(s).closest(".search_div").find(".co-id").val($(s).find(".countryid").val())  $(s).closest(".search_div").find(".co").empty();}$(document).click(function(event) {  if($(event.target).hasClass('country') || $(event.target).hasClass('co') || $(event.target).hasClass('txtcountry'))    return;  alert("hello")});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="search_div">  <input class="country" value="" type="text"/>  <input type="hidden" class="co-id" value=""/>  <div class="co" style="border:1px solid red;">    <div class="selectCountry" onClick="clicking(this)">     <input type="hidden" value="1198418" class="countryid"/>    <span class="txtcountry"> <i class="fa fa-arrow-right"></i> Turkey-Ankara</span>  </div>
    <div class="selectCountry" onClick="clicking(this)">     <input type="hidden" value="1198425" class="countryid"/>    <span class="txtcountry"> <i class="fa fa-arrow-right"></i> Turkey-Istanbul</span>  </div>
  </div></div>

click on body except on specific div

The selector $("body").not($("#menutop")) will select the body element if it is not the #menutop element. Since the body element clearly isn't #menutop element, the body element is still selected and the click event is attached to it.

Even if you click on the #menutop element, the click event will still bubble up and trigger the click event on the body element, therefore one option is to make a check to see if event.target is the #menutop element:

$(document).on('click', function (event) {
  if (!$(event.target).closest('#menutop').length) {
    // ... clicked on the 'body', but not inside of #menutop
  }
});

Alternatively, you could also suppress the event bubbling and stop event propagation when clicking in the #menutop element:

$(document).on('click', function (event) {
  // ... clicked on the 'body', but not inside of #menutop
});
$('#menutop').on('click', function (event) {
  event.stopPropagation();
});

Javascript: Click anywhere in body except the one element inside it

You need to stopPropagation to the outer element.

Here's a simple illustration: http://jsfiddle.net/5mhqrhwk/3/

var body = document.getElementById('wrapper');
var except = document.getElementById('except');

body.addEventListener("click", function () {
    alert("wrapper");
}, false);
except.addEventListener("click", function (ev) {
    alert("except");
    ev.stopPropagation(); //this is important! If removed, you'll get both alerts
}, false);

HTML:

<div id="wrapper">
    <center>
        <div id="except"></div>
    </center>
</div>

Click anywhere but in the div to close menu

I would reverse the if so that you don't have to return false:

$(document).click(function(e) {
  // Check if click was triggered on or within #menu_content
  if (!$(e.target).closest("#menu_content, #menu-item-2003 a, #menu-item-2003 ul li a").length) {

    $("#menu-item-2003 ul").slideUp("slow", function() {
      // Animation complete.
    });
  }
});

click anywhere except a specified class

In e.target there is no property class (it returns undefined), you can use property e.target.className (Note it returns all classes from class attribute), however in jQuery there is method .hasClass .

Also you can use classList with .contains method e.target.classList.contains('m1wrap')

$(document).on('click', function (e) {  if (!$(e.target).hasClass('m1wrap')) {    console.log('not m1wrap');  }});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="m1wrap">m1wrap</div><p>test</p>

$('html').click()... anywhere except one element

Maybe it will work like this

$('html').click(function(e) {                    
   if(!$(e.target).hasClass('solid') )
   {
       $('.menu').remove();                
   }
}); 

see: http://jsfiddle.net/fq86U/2/

Run Javascript code on click of anywhere on the page (except on click of certain divs)

Handle click on document, #catDIV and #mouseDIV. Do nothing on click on the latter two. The click on any other element will bubble up to the document's click handler.

    $(document).click(function(evt) {      alert("clicked anywhere except catDIV and mouseDIV");    });    $("#catDIV, #mouseDIV").click(function(evt) {      evt.stopPropagation();    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="catDIV">catDIV</div><div id="cowDIV">cowDIV</div><div id="mouseDIV">mouseDIV</div>

How do I hide an element on a click event anywhere outside of the element?

If I understand, you want to hide a div when you click anywhere but the div, and if you do click while over the div, then it should NOT close. You can do that with this code:

$(document).click(function() {
    alert("me");
});
$(".myDiv").click(function(e) {
    e.stopPropagation(); // This is the preferred method.
    return false;        // This should not be used unless you do not want
                         // any click events registering inside the div
});

This binds the click to the entire page, but if you click on the div in question, it will cancel the click event.

---

Related Topics