javascript - 在不切换 Div 可见性的情况下更改 div 中的文本

Question

在我的 Div(下面的代码)中，有一个 onClick 函数可以触发第二个 div 的可见性，并且在 div 中也有一个可食用的内容。当我单击更改文本时，它还会触发第二个 div 的可见性。我将如何更改代码以便在不更改第二个 div 的可见性的情况下单击文本？

<div class="div1" id ="div1" onclick="onStepClicked()" style ="text-align:center"><p contenteditable="true" >Step 1</p></div>

功能:

function onStepClicked() {
        var elem = document.getElementById('div2');
        if (Visible === true) {
            elem.style.display = 'none';
            Visible = false;
        }
        else {
            if (Visible === false) {
                elem.style.display = 'block';
                Visible = true;
            }
        }
    }

Answer 1

您可以只触发对父级 div 的点击，并在 jQuery 中排除对子级的点击，如下所示:

$("#div1").click(function(){
  $("#div2").css('visibility','hidden');
}).children().click(function(e) {
  return false;
});

如果您对 jQuery 不满意并且想要一个仅使用 JavaScript 的解决方案，请发表评论并告诉我。

更新

如果您正在寻找 JavaScript 解决方案，请点击这里:

HTML

<div id ="div1" onclick="onStepClicked()" >
    <p id="editable" contenteditable="true">Step 1</p>
</div>

JS

function onStepClicked(){
    document.getElementById('div1').onclick = function(e) {
        if(e.target != document.getElementById('editable')) {
            document.getElementById('div2').style.visibility = 'hidden';          
        }
    }
}