javascript - Changing Text in div without toggling Div Visiblity -

in div (code below) there onclick function triggers visibility of second div, , there content edible in div well. when click change text triggers visibility of second div. how change code can click text without changing second div's visibility?

<div class="div1" id ="div1" onclick="onstepclicked()" style ="text-align:center"><p contenteditable="true" >step 1</p></div> 

function:

function onstepclicked() {         var elem = document.getelementbyid('div2');         if (visible === true) {             elem.style.display = 'none';             visible = false;         }         else {             if (visible === false) {                 elem.style.display = 'block';                 visible = true;             }         }     } 

you may trigger click on parent div , exclude click on child in jquery this:

$("#div1").click(function(){   $("#div2").css('visibility','hidden'); }).children().click(function(e) {   return false; }); 

if not ok jquery , after javascript - solution, please leave comment , let me know.

update

if after javascript solution, here u r:

html

<div id ="div1" onclick="onstepclicked()" >     <p id="editable" contenteditable="true">step 1</p> </div> 

js

function onstepclicked(){     document.getelementbyid('div1').onclick = function(e) {         if(e.target != document.getelementbyid('editable')) {             document.getelementbyid('div2').style.visibility = 'hidden';                   }     } }