我正在使用纯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/
答案 0 :(得分: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;
:)