Traveling up the DOM with my friend ".closest" :)

JavaScript
1

Hi all.

I’m currently working on a way to close a menu when the user is clicking outside the menu or any type of dropdown for that matter :]

The if statement i have is checking to see if the element that is clicked is a child of the menu and if it’s not close the menu.

It works good with everything i have tested it with but when i use the jquery ui datepicker there is a problem with the if statement, everything in the menu (with the datepicker) can be click without the menu closing but as soon as i click on the prev and next month (in the header of the datepicker) it closes the menu, if you click anywhere else in the pickers header it does not close (like i want it)

On to the code

$(document).on('click', function(event){
	if(!$(event.target).closest('.select-box').length){
                // hides the menu
		e.children('div').removeAttr('style');

                // This will stop the document click event from running after you click outside the menu
		$(this).off(event);
	}
});

now keep in mind that this click event is inside the click event that opens the menu so the click event above will not run every time a person clicks, and as you can see i’m unbinding the click event after it’s done to prevent it from going on.

I do not know why this is not working, can it be that there are to many classes attached to the parent div’s?
I have tried .parents as well but it has the same end result :frowning:

If you need more details please ask, thank you all for reading this :smile:

3

The best way to get an answer is to supply a working demo of the problem. Either a link to the page concerned or a codepen exhibiting the problem.

If that can’t be achieved then we would need to see the html that goes with this and more details of the scripts used.

It may be that one of the JS experts here can spot the problem in the code you posted but most questions get answered more quickly when there is a working to demo to play with :smile:

4

Hey @PaulOB Thank you for the tip, here is a pen for everyone to have a little play around with.

I hope this helps a bit more and clears up some stuff i missed, oh and please note that i did not add a date processing so the date will not be added to the input field :smile:

5

What happens if you add stopPropagation here?

$('.select-box').on('click', function(event){
        var e = $(this),
                closeMenu;
			event.stopPropagation();
6

I’m sure that will work but i read this (Link) and after reading that i’m not wanting to use stopPropagation, thanks for the suggestion :smile:

7

Yes, I’ve read that before was just suggesting testing so that it would identify the problem more clearly.:slight_smile:

If it cures the problem then it seems you would need to check for a click event on the calendar instead and if so then exit from your routine without removing the style attributes.

8

I found what is making it close, the next/prev buttons are “a” tags which in turn are making them close the menu, stopping propagation is working because as you would think it’s stopping the link from working.

So i tried to make the next/prev buttons div’s only to see that they need to be links for the datepicker to be able to go back or forward, now i’m stuck not knowing what to do because i can’t change the tag to div because the link is needed and i don’t want to stopPropagation because from the article i have liked i feel like if i do it i’m just making more problems for myself later on.

@PaulOB in your opinion what would you do? go with stopPropagation and feel like your making life a but more difficult in the future or do i continue to search for a solution to this?

Okay i know i’m likely making stopPropagation sound worst then it is and from my understanding it’s okay to use them but in there right situations, is this one of them?

9

Hi,

Maybe @Paul_Wilkins or @James_Hibbard can chip in with some expert advice :smile:

10

Consider the alternatives to not using stopPropagation. If you aren’t to stop it then you will need to adjust the close menu code so that it ignores events coming from within the date picker itself.

To achieve that, another check will be required where you check if the event came from inside of the datepicker element. If it did then you know that you can ignore that event.

11

Thanks Paul, that’s more or less what I said in post #7. :smile:

This seems to work as its only the previous and next buttons that are the issue.

 $(document).on('click', function(event) {
     if (!$(event.target).closest('.select-box').length) {

         var target = $(event.target);
         if (target.is(".ui-datepicker-next span") || target.is(".ui-datepicker-prev span")) {
             return
         }

         console.log($(event.target).parents('.select-box'));
         e.children('div').removeAttr('style');

         $(this).off(event);
     }

 });
12

Thank you @Paul_Wilkins and @PaulOB for the help it’s working :slight_smile: one thing though, if you return in the click event does it not use stop propagation or is it just when your use return false?

13

It won’t stop propagation unless you explicitly tell it. Return just exits without doing anything. If you use return false then you stop the default behaviour of that element (and stops propagation in a jquery event).

14

Thank you guys so much for all your help, i have to tell you that i’m not someone who likes to post a question because i always feel like i’m going to be judged for the quality of the code i’m writing and thank you guys again for helping with my problem and not bashing down my coding skills :smile:

1 Like
15

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.