html - Javascript WYSIWYG removeEventListener then bring it back -

i creating weird wysiwyg scratch using pure js exercise. here code far:

<style>      body {         height: 200px;         background: white;     }      .title1 {         height: 12px;          width: 100px;         background: white;         position: relative;      } </style>     <script> newtitle1 = function() {     var title1 = document.createelement("div")     title1.setattribute("contenteditable", "true")     title1.innerhtml = "whatever";     title1.classname = "title1";     title1.addeventlistener("click", function() {         removeeventlistener("click", newtitle1);     })      title1.style.left = (event.pagex -4) + "px";     title1.style.top = (event.pagey -4 ) + "px";     document.body.appendchild(title1)  }     addeventlistener("click", newtitle1)     </script> 

my question

title1.addeventlistener("click", function() {         removeeventlistener("click", newtitle1);     }) 

i want removeeventlistener work while click div created. but, when click outside of div, want newtitle1 work.

bottomline: want newtitle1 listener work outside of div created, , not work inside div creates. ideas how make happen? here fiddle of code test if needed: https://jsfiddle.net/nirchernia/v3clwb82/

you want stop event propagating. solution shamelessly stolen over here.

newtitle1 = function() { var title1 = document.createelement("div") title1.setattribute("contenteditable", "true") title1.innerhtml = "whatever"; title1.classname = "title1"; title1.addeventlistener("click", function(event) {     event.stoppropagation()     window.event.cancelbubble = true })  title1.style.left = (event.pagex -4) + "px"; title1.style.top = (event.pagey -4 ) + "px"; document.body.appendchild(title1) 

}

addeventlistener("click", newtitle1)

/edit: , think want .title1 css have position:absolute; :)