javascript - 当单击事件发生在除已定义选择器之外的任何选择器上时调用 JavaScript 函数？

Question

下面是一个 JavaScript 项目的示例，其中的“描述”字段在单击编辑按钮时进入编辑模式。这显示了一个隐藏的文本区域，一些用于在编辑和预览 Markdown 输出之间切换的选项卡，以及保存和取消按钮都显示出来。

一旦描述被保存或取消，触发它“关闭”退出编辑模式

现在要退出编辑模式，您必须单击下图中的保存或取消按钮。

我想在用户点击编辑模式部分之外时自动关闭。因此，在与编辑模式无关的任何地方单击都会触发“关闭编辑模式”的 JavaScript 代码。

有点像....

If in edit mode{

    if click on any selector that is not .edit-btn, .save-btn, .tabs, or edit-wrapper{

        // call my close edit mode function
        closeEditMOde();

    }

}

所有的名字和一切都是为了快速解释我的目标。

如何在 JavaScript/jQuery 中实现这一点？

像一个简单的效用函数这样聪明的东西会很好，它需要一个选择器数组....

function ifAnyElemExceptTheseClickedOn(['.save-btn', '.cancel-btn', '#edit-wrapper', '.tabs']){

    // if a click event happens anywhere that is not inside one of the passed 
    // in array of selector elements on the page, then perform an action 

    // if click is outside of any of thewse selectors, then run a callback function

}

---

除了自己定义的点击事件外，点击任何红框都不会产生任何结果。

点击红框外的任何地方都会触发/触发对我的 JS 函数的函数调用。

---

更新

我现在在这里有一个简单的演示 http://jsfiddle.net/jasondavis/gpyusv6a/如果我可以摆脱在 DIV 外部单击时抛出的 JS 错误，我认为这将满足我的需要:

Uncaught TypeError: Cannot read property 'match' of undefined  

演示:

<div id="edit-wrapper">edit mode section
    <div id="edit-wrapper-inner">
        edit mode inner section
    </div>
</div>

$(document).click(function(event) {
  var target = $(event.target);

  console.log(target);

  if (!target.attr('id').match(/^edit-wrapper/).length && target.parents('#edit-wrapper').length == 0) {
      console.log('Hide edit-wrapper because you clicked on the screen outside of the #edit-wrapper DIV');
      $('#edit-wrapper').hide();
  }
});

Answer 1

我认为您需要 :not selector

示例:

$(document.body).on('click','*:not(.edit-btn, .save-btn, .tabs, #edit-wrapper)', function(){
    YOUR CODE
});