javascript - 单击页面上的任意位置运行 Javascript 代码(单击某些 div 除外)

Question

我有这段 Javascript 代码:

$('#catDIV').on('click',function(){

    $("#dogDIV").fadeOut(500, function() {

            makeCat();

        }).fadeIn(500);
});

这会淡出 div“dogDIV”，运行函数“makeCat();”并在单击 div“catDIV”时淡化“dogDIV”。

我的问题是，是否可以更改此代码，以便无论单击页面的哪个部分它都会运行，是否可以指定不应激活代码的某些 div？

换句话说，是否可以说“如果页面的任何部分被点击，除了这些特定的 div，然后运行代码……”。

我希望无论用户在页面上的哪个位置单击代码都可以运行，但我不希望它在用户单击 div“catDIV”或另一个名为“mouseDIV”的 div 时运行。我不确定这是否可能？

我见过类似的问题:jQuery click anywhere in the page except on 1 div但是是否可以指定多个不应触发代码运行的 div？

如能提供任何帮助，我们将不胜感激，在此先感谢您!

Answer 1

处理点击 document、#catDIV 和 #mouseDIV。单击后两个时什么也不做。点击任何其他元素都会冒泡到 document 的点击处理程序。

    $(document).click(function(evt) {
      alert("clicked anywhere except catDIV and mouseDIV");
    });
    $("#catDIV, #mouseDIV").click(function(evt) {
      evt.stopPropagation();
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="catDIV">catDIV</div>
<div id="cowDIV">cowDIV</div>
<div id="mouseDIV">mouseDIV</div>