1

我有一个按钮，单击该按钮时，会更改 div 的可见性，如下所示：

<button type="button" id="editbutton" onclick="plus()" alt="Edit"></button>

function plus() {
var f = document.getElementById('edit');
if (f.style.visibility == 'hidden') {
   f.style.visibility = 'visible';
   }
else
    f.style.visibility = 'hidden';
}

这工作正常。但现在我想添加该功能，以便如果用户单击 div 之外的任何位置，div 将返回隐藏状态。

最初我尝试了自己的方法，但没有成功，因为每当我单击按钮使 div 可见时，新代码再次将其隐藏。我查看了其他人发布的一些 jQuery 示例，但是我尝试过的没有一个可以解决这个问题。任何帮助我都会非常感激。

编辑：澄清一下，问题在于，由于用户单击按钮最初使 div 可见，所以每当我单击按钮时，div 会变得可见，但会立即再次隐藏，因为这算作单击的主体页。

4

3 回答 3

3

当用户在您的 div 中单击时，您可以在 click 事件处理程序中对事件调用“e.stopPropagation()” - 这将阻止事件“冒泡”DOM。

然后，如果您将事件处理程序附加到侦听点击的 BODY 元素，则可以使用该事件处理程序隐藏 DIV；知道单击 DIV 本身不会将事件冒泡到 BODY 处理程序。

这样，除非处理程序也调用 stopPropagation()，否则对另一个元素的任何单击都会被处理程序捕获。因此，如果在其他情况下您不希望 div 隐藏，您可以根据需要调用 stopPropagation() 来阻止它的发生。

例如：

$("#edit-button").click( function(e) {
    $("#edit").toggle();
    e.stopPropagation();
});

$('#edit').click(function(e) {
    e.stopPropagation();
});

$("body").click( function(e) {
    $("#edit").hide();
});
于 2012-10-13T23:49:11.110 回答
0

body在元素上设置点击处理程序。如果您可以检查event.target它是否与 匹配div，如果匹配：什么都不做，否则：隐藏它。

document.body.onclick = function(event) {
    if (event.target === f) {
        // user clicked on the div, do nothing
    } else {
        f.style.visibility = "hidden";
    }
};

div如果您在编辑中有元素（并且不匹配），这会变得有点复杂.target，但我相信您可以提出解决方案:)（可以完成）。

于 2012-10-13T23:49:03.033 回答
-1

你似乎知道自己在做什么，所以我会保持简短。

在 jquery 中编写一个 .click 函数。

你给你的按钮一个id（或者它所在的div）

$('#buttonidordiv').click(function(){
 $('#divtoshow').show() // put in a number to create a fade in seconds.
//your stuff here
}

如果有人点击它之外的任何地方......我认为你应该能够使用 window. 否则你可以使用另一个 div （比​​如你的包装器）。

所以

$('window').click(function(){
$('#samediv').hide() //same as above
//your stuff here

}

确实意识到，我很讨厌，)};所以您可能必须在某处添加其中一个；）

祝你好运！

于 2012-10-13T23:50:44.650 回答