Click body but not two divs

Question

Here's my function:

document.querySelector('body').addEventListener('click',e=>{getRandomImagePair()});

When I click anywhere on the body something happens. I have two divs .more and .wd and if I click on them the function getRandomImagePair() executes. How can I make so that if I click the links the function doesn't fire?

I tried this below, it works but then the .more div won't trigger another needed different function.

$('.more, .wd').on('click', function(event) {
  event.stopPropagation();
});

@epascarello yes on clicking the body but also the two divs. One div triggers another function also. — Federico, Jul 03 '18 at 12:58
Possible duplicate of [jQuery bind click \*ANYTHING\* but \*ELEMENT\*](https://stackoverflow.com/questions/6635659/jquery-bind-click-anything-but-element) — Daan, Jul 03 '18 at 12:58
You can do something like this https://jsfiddle.net/pe9yt467/ — Kirankumar Dafda, Jul 03 '18 at 13:27

Tom O. · Accepted Answer · 2018-07-03T13:23:28.237

1

Using event delegation, just check the className of the event.target element. Use an if statement in your event handler callback to prevent getRandomImagePair from being called a link was clicked on:

function getRandomImagePair() {
  console.log('getRandomImagePair called');
}

//using event delegation
document.querySelector('body').addEventListener('click', e => {
  if (e.target.className !== 'wd' && e.target.className !== 'more') {
    getRandomImagePair();
  }
});

.wd,
.more {
  color: blue;
  text-decoration: underline;
}

<body>
  <div class="more">.more</div>
  <div class="wd">.wd</div>

  <p>Here is some other stuff</p>
  <p>that when clicked on should still fire event handler</p>
</body>

edited Jul 03 '18 at 13:23

answered Jul 03 '18 at 13:11

Tom O.

5,730
2
21
35

This has a flaw if there are children inside of the element `
click here.more
` So if OP has nested elements inside, than this answer will fail. – epascarello Jul 03 '18 at 13:39
@epascarello Nothing about nested `` elements was detailed in the question. – Tom O. Jul 03 '18 at 13:42
I agree this answer will work if there is no nesting. Just stating it in case the OP has it since it is vary rare the OP shows the actual HTML. Using [contains()](https://developer.mozilla.org/en-US/docs/Web/API/Node/contains) would be safer IMO. – epascarello Jul 03 '18 at 13:44

score 0 · Answer 2 · answered Jul 03 '18 at 13:01

0

Try excluding the items you don't want to be affected by the click :

const getRandomImagePair = () => {
 alert("clicked")
}

$('body :not(".more, .wd")').on('click', getRandomImagePair);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Yep</button>
<button class="more">Nope</button>
<button class="wd">Nope</button>
<button>Yep</button>

answered Jul 03 '18 at 13:01

Jeremy Thille

26,047
12
43
63

This is different though, I need that document.querySelector and it doesn't work with 'body :not(".more, .wd")' – Federico Jul 03 '18 at 13:04
1

Why do you _need_ document.querySelector? And why did you try with jQuery and added the jQuery tag, then? – Jeremy Thille Jul 03 '18 at 13:05
1

@Federico this is equivalent of `document.querySelector('body :not(.more):not(.wd)')` – barbsan Jul 03 '18 at 13:27
Has an issue.... `` so if the OP has a nested element, it will not work. – epascarello Jul 03 '18 at 13:37

Click body but not two divs

2 Answers2