CODEWITHSUNDEEP
jqueryeventsjquery-selectorsconditional-statements
tmutton
tmutton

Reputation: 1101

Exclude click event based on condition?

I'm trying to set conditions on a jQuery event. I have an input element and a div. I want to detect a click anywhere on the page and to execute that method but only if the click is not on the input or div.

Upvotes: 11

Views: 10774

Answers (5)

Josiah Ruddell
Josiah Ruddell

Reputation: 29831

Something like this should work.

$('body').click(function(event){ // body click
    var $target = $(event.target); // click target
    if($target.is('#mydiv, #myinput')) { // click target is div or input
        $target.click(); // click div or input
    }
});

Upvotes: 4

Marcel Verwey
Marcel Verwey

Reputation: 451

Example to exclude specific elements using a wildcard:

$("#mydiv li").click(function(e){

        var Target = new String(e.target.id);

        // prevent action when a element with id containing 'img_' is clicked
        if( !Target.match(/img_/ )) {
            // do something
        }

});

Upvotes: 1

Mike Grace
Mike Grace

Reputation: 16924

Use the jQuery click() or live() functions and then check the target of the click event using the jQuery is() function.

  1. bind click event on document
  2. if the target is not input or div continue

.

$(document.body).click(function(e) {
  if( !$(e.target).is("input, div") ) {
    console.log("Run function because image or div were not clicked!");
  }
});

Example webpage => http://mikegrace.s3.amazonaws.com/forums/stack-overflow/example-document-click-exclusion.html

Example firebug output after clicking around on example page

alt text

Upvotes: 12

Šime Vidas
Šime Vidas

Reputation: 185893

var input = $("#yourInput")[0];
var div = $("#yourDiv")[0];

$(document.body).click(function(e) {
   switch ( e.target ) {
       case input: case div: return;
   }
   yourMethod();
});

Upvotes: 2

John Hartsock
John Hartsock

Reputation: 86872

Basically assign a click handler to the body of the page, then test the target Element of the event to see if the id of that target element matches your div or your input.

$("body").click(function(evt) {
  var targetElementId = evt.target.id;

  if (!(targetElementId  == "yourDivID" || targetElementId == "yourinputId"))
  {
    // your event code here.
  }
});

Upvotes: 2

Related Questions