Question

我正在使用纯JS作为练习从零开始创建一个奇怪的WYSIWYG。这是我到目前为止的代码：

<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内部工作。任何想法如何实现这一目标？以下是我需要测试的代码的小提琴：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（“click”，newTitle1）

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

Javascript WYSIWYG removeEventListener然后将其恢复

1 个答案: