how to exclude the elements inside a div from the click

Question

I'm looking for a jquery function doing the following :

if I click everywhere inside the div (but elements inside this div), the code is executed .
if I click in an html element inside this div , noting happens .

You can check, if `e.target` has the same `id` as your `div` which is allowed to click. — Teemu, Dec 12 '13 at 11:24

score 0 · Answer 1 · answered Dec 12 '13 at 11:28

0

The event is lopped through the element, until a element with a click element is found. Solutions:

Test if the target element is the same as the delegateTarget
You set the event of the inner elements to a empty function

answered Dec 12 '13 at 11:28

schnawel007

3,982
3
19
27

score 0 · Accepted Answer · edited Dec 12 '13 at 11:39

0

You need to test if the clicked target is this. Fiddle here: http://jsfiddle.net/ZBC43/

$('div').on('click', function(e) {
    if (e.target !== this) return;
    alert('div clicked');
});

edited Dec 12 '13 at 11:39

Fabrício Matté

69,329
26
129
166

answered Dec 12 '13 at 11:30

n1kkou

3,096
2
21
32

score 0 · Answer 3 · answered Dec 12 '13 at 11:33

You need something like this (i try to find parent div with your class):

<div class='foobar'>
    <span>child1</span>
    <span>child2</span>
</div>
<span>child3</span>

<script>
$('.foobar').on('click', function(e) {
    var testelem = $(e.target);
    while (testelem != undefined && !testelem.hasClass('foobar')){
        testelem = testelem.parent();
    }

    if (testelem != undefined && testelem.hasClass('foobar')) {
        alert('code');
    }
});
</script>

http://jsfiddle.net/eaVzx/

Mr.G · Answer 4 · 2013-12-12T12:18:15.037

0

Try this:

$("div").click(function(e) {
        if (e.target !== this) return;
        alert("inside a div");
    });

edited Dec 12 '13 at 12:18

answered Dec 12 '13 at 11:35

Mr.G

3,413
2
16
20

score 0 · Answer 5 · answered Dec 12 '13 at 11:51

You can use tagName dom property to get current target element name.

TagName: Returns the name of the element.

HTML

<div id="myDiv" style='display:inline-block; width:300px;'><span style='display:inline-block;'>Hello Click here</span><br /><span style='display:inline-block;'>Click here</span></div>

Javascript

$(document).ready(function(){
 $('#myDiv').click(function (e) {        
    if (e.target.tagName == "DIV") { 
       alert('Clicked on Div');
    }
    else{
       alert('Clicked on Inner Element');
    }
 });
});

Try in fiddle

OR also use nodeName property to get current element.

NodeName: Returns the name of the current node as a string.

Try in fiddle 2

how to exclude the elements inside a div from the click

5 Answers5