如何使用Javascript解决整个可点击div？

Question

I have a problem with my Javascript . I have a collapsible area which has content and input fields for my users to write something on. I have made a JavaScript function that collapses and opens the div, but the problem is that you can't write something on the input fields in this area, because the whole div is clickable. I don't want the whole div to be clicakble, but only the area with the title to be clickable.

How can I make only, and only the header, clickable?

HTML: Test title blablbala

<div class="area">Test title
       <div class="some content">blablbala
          <input></input>
       </div>
    </div>

JS:

function areaCollapse() {
    var next = this.querySelector(".content");

    if (this.classList.contains("open")) {
        next.style.display = "none";
        this.classList.remove("open");
    } else {
        next.style.display = "block";
        this.classList.add("open");
    }
}

    var classname = document.getElementsByClassName("area");

    for(var i=0;i<classname.length;i++){
        classname[i].addEventListener('click', areaCollapse, true);
    }

http://jsfiddle.net/1BJK903/nb1ao39k/6/

I think that I have to change the structure of my HTML. I tried this already:

Answer 1

Check this fiddle if this is what you wanted: http://jsfiddle.net/nb1ao39k/5/

I added this:

if(this != evt.target){
    return;
}// if the element that listened to the event is not the element who was clicked then ignore

Answer 2

Check whether the event went to an input element before bubbling:

function areaCollapse(event) {
    if (event.target.tagName == "INPUT") {
        return;
    }
    ...
}

Alternatively, only allow clicks on the title, not the rest of the div.

Answer 3

Working Version :

 function areaCollapse() { var next = this.parentNode.children[1]; if (this.classList.contains("open")) { next.style.display = "none"; this.classList.remove("open"); } else { next.style.display = "block"; this.classList.add("open"); } } var classname = document.getElementsByClassName("title"); for(var i=0;i<classname.length;i++){ classname[i].addEventListener('click', areaCollapse, true); } 

 .content { display: none; } 

 <div class="area"><div class='title'>Test title</div> <div class="some content">blablbala <input></input></div> </div> <div class="area"><div class='title'>Test title</div> <div class="some content">blablbala <input></input></div> </div> 

Answer 4

You could try this:

HTML:

<div class="area">
    <h2 class="clickable-header">Test title</h2>
       <div class="some content" style="display: none">blablbala
          <input></input>
       </div>
    </div>

<div class="area">
    <h2 class="clickable-header">Test title</h2>
       <div class="some content">blablbala
          <input></input>
       </div>
    </div>

JS:

function areaCollapse() {
    var next = this.nextElementSibling;

    if (this.classList.contains("open")) {
        next.style.display = "none";
        this.classList.remove("open");
    } else {
        next.style.display = "block";
        this.classList.add("open");
    }
}

    var classname = document.getElementsByClassName("clickable-header");

    for(var i=0;i<classname.length;i++){
        classname[i].addEventListener('click', areaCollapse, true);
    }

Just adds a heading element which is the clickable portion.