Javascript WYSIWYG removeEventListener затем вернуть его

Question

Я создаю странный WYSIWYG с нуля, используя чистый JS как упражнение. Вот мой код до сих пор:

<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> 

Мой вопрос конкретно о

title1.addEventListener("click", function() { 
     removeEventListener("click", newTitle1); 
    }) 

Я хочу removeEventListener работать в то время как я нажимаю в DIV, что он только что создали. НО, когда я щелкаю за пределами div, я хочу, чтобы newTitle1 работал.

Bottomline: Я хочу newTitle1 слушателя работать за пределами DIV он просто создан, а не для работы внутри DIV он создает. Любые идеи, как это сделать? Вот скрипка моего кода для проверки при необходимости: https://jsfiddle.net/nirchernia/v3cLwb82/

Answer 1

Вы хотите остановить распространение события. Решение бесстыдно украдено от 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 ("щелчок", newTitle1)

/редактировать: И я думаю, что вы хотите, чтобы ваш .title1 CSS, чтобы иметь position:absolute; тоже :)