Div to toggle it's display on/off but be able to click the input

Question

I'm trying to make it so that whenever you click on either the button OR div itself, the display toggles. But whenever I click on the input inside of the div, the div disappears.

How can this be made so that you can still click on the input and the div not disappear? I've tried setting a z-index to the input but this fails.

Appreciate any help, thank you.

function doThis() {
  var el = document.querySelector('div');
  
  if (el.style.display === 'flex') {
      el.style.display = 'none';
      } else {
        el.style.display = 'flex';
      }
}

div {
  background: lightgreen;
  display: flex;
}

<button onclick='doThis()'>click me</button>

<div onclick='doThis()'>
  text <input type="text">
</div>

You can't using `display:none` as it hides the element and all it's contents. You might be able to do somthing with `visibility` though. — Paulie_D, Sep 04 '18 at 15:23

vicbyte · Accepted Answer · 2018-09-04T15:38:48.440

2

If you want the input click not to trigger the div click, you can use event.stopPropagation() function. It prevents event bubbling (passing the event to higher level DOM-elements).

function doThis() {
  var el = document.querySelector('div');

  if (el.style.display === 'flex') {
      el.style.display = 'none';
      } else {
        el.style.display = 'flex';
      }
}

div {
  background: lightgreen;
  display: flex;
}

<button onclick='doThis()'>click me</button>

<div onclick='doThis()'>
  text <input onclick='event.stopPropagation()' type="text">
</div>

edited Sep 04 '18 at 15:38

answered Sep 04 '18 at 15:24

vicbyte

3,690
1
11
20

interesting. it works on this demo but not on my task. What does the (event) part mean? does it have to be called (event)? – user8758206 Sep 04 '18 at 15:29
`event` is a global that contains the last fired event on page (in case of onclick handler this will obviously be a `click` (also called `MouseEvent` in some browsers). – vicbyte Sep 04 '18 at 15:45

Fii · Answer 2 · 2019-09-19T21:49:05.850

For a pure JavaScript solution (that doesn't need jQuery), see this answer from @Sabaz to How do I prevent a parent's onclick event from firing when a child anchor is clicked?:

document.getElementById("clickable").addEventListener("click", function( e ){
    e = window.event || e; 
    if(this === e.target) {
        // put your code here
    }
});

Your code wont be executed if clicked on parent's childs

score 1 · Answer 3 · answered Sep 04 '18 at 15:30

you can do this:

function doThis(evt) { // <-- new: add argument
  evt.preventPropagation() // <-- new, works in all new browsers
  var el = document.querySelector('div');

  if (el.style.display === 'flex') {
      el.style.display = 'none';
      } else {
        el.style.display = 'flex';
      }
}

And add to your html:

onclick='doThis(event)'

score 1 · Answer 4 · answered Sep 04 '18 at 15:30

1

Why cant you implement event stopPropagation for all input objects, Try ..

// select elements with js selectors and bind it
document.querySelector('input').onclick = function(e){
   e.stopPropagation()
};

and here is answer by Rex M

answered Sep 04 '18 at 15:30

Sarath

2,318
1
12
24

score 1 · Answer 5 · answered Sep 04 '18 at 15:32

Just check the target element which is clicked

function doThis() {
 if(event.target.nodeName != "INPUT"){
 var el = document.querySelector('div');
   if (el.style.display === 'flex') {
     el.style.display = 'none';
   } else {
     el.style.display = 'flex';
   }
  }
}

Div to toggle it's display on/off but be able to click the input

5 Answers5

Linked