Javascript 所见即所得的 removeEventListener 然后把它带回来

Question

我正在使用纯 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 起作用。

底线： 我希望 newTitle1 侦听器在刚刚创建的 div 之外工作，而不是在 div 内部工作它创建。任何想法如何实现这一目标？这是我的代码 fiddle 以测试是否需要：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)

/edit：我认为你希望你的 .title1 CSS 也有 position:absolute; :)

Javascript 所见即所得的 removeEventListener 然后把它带回来

Javascript WYSIWYG removeEventListener then bring it back

javascript

html

css

wysiwyg