更新

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解决方案，请访问U R：

<强> 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';          
        }
    }
}

Answer 2

尝试在脚本中使用元素＆gt;元素选择器。它只会影响第一个子元素，然后停止影响子子元素。

教程：（http://www.w3schools.com/cssref/sel_element_gt.asp）

更改div中的文本而不切换Div Visiblity

2 个答案:

更新