Jquery .hasClass() method not working on dom click event check

Question

I have an input box with class use-keyboard-input. I want to have DOM event fire in all click events except when the input box is clicked

I did:

$('*').click(function(event) {


    if ($(this).hasClass('use-keyboard-input') == false){
        console.log(`pressing outside the box`)

        keyboardHidden = false
        $('.keyboard--hidden').each(()=>{
            keyboardHidden = true          
        })


        if (keyboardHidden == false){     //If keyboard is not hidden
            // if (this !== $(".keyboard")) { 
                Keyboard.close();
                console.log(`Close the keyboard`)
            // }
        }
    }


});

However, even when I click inside the input box with class use-keyboard-input, I get the console message

console.log("pressing outside the box")

as @Pointy mentioned, events bubble up the DOM hierarchy. So click on the input box also fires click event on all of its ancestor elements. Use event.stopPropagation() to prevent event bubbling up. — sujan basnet
– sujan basnet, Commented Oct 15, 2019 at 4:02

Mamun · Accepted Answer · 2019-10-15 04:02:58Z

1

Try with Event.stopPropagation() which will prevent further propagation of the current event in the capturing and bubbling phases.

Demo:

$('*').click(function(event) {

  event.stopPropagation();
  if ($(this).hasClass('use-keyboard-input') == false){
    console.log(`pressing outside the box`)

    keyboardHidden = false
    $('.keyboard--hidden').each(()=>{
      keyboardHidden = true          
    })


    if (keyboardHidden == false){     //If keyboard is not hidden
      console.log(`Close the keyboard`)
    }
  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  Container
  <input class="use-keyboard-input"/>
</div>

answered Oct 15, 2019 at 4:02

Mamun

69k9 gold badges51 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Jquery .hasClass() method not working on dom click event check

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related