javascript - jQuery :not() selector does not work in . off() 方法

Question

为什么不完全支持 .off() 方法中的 :not() 或 :has() 选择器？

$(document).off() 取消绑定(bind)文档中的所有事件。

$(document).off('.MyNamspace') 取消绑定(bind)使用命名空间 'MyNamspace' 创建的所有事件，例如$(document).on('click.MyNamespace','a',function(){})

但是

$(document).off(':not(.MyNamspace)') 返回正则表达式错误

以后可以实现吗？

问题更详细:

假设我有一个 HTML 基础框架，例如导航栏和一些事件将其与定义的限定符绑定(bind)在一起。在这个框架中是一个容器，它包含可变内容和动态加载的 JavaScript，并且还在动态加载的容器中的元素上绑定(bind)事件。

如果内容发生变化，我还想删除关联的 JavaScript 部分和所有事件，除了我自己为框架创建的(以及其他类似引导事件)。

动态加载的 JavaScript 被严格加载到一个对象中，例如:

foo = new whatEverYouWant();

当容器的内容将被其他内容替换时，我将 foo 设置为 undefined 或 null，所有已定义的变量和方法都消失了。

但是如果用户分配了一个事件，例如:

$(document).on('mousemove', function(e) {
  console.lg(e,'bla bla bla');
});

移除内容后事件将继续。

Answer 1

过滤命名空间没有神奇的方法。

但是，您可以使用 $._data(element,'events') 访问分配给元素的所有 jQuery 事件。

返回的对象使用 eventName 作为键，每个键包含一个对象数组，这些对象包含诸如 namespace 和 selector 等属性。

然后您可以迭代各种事件并执行以下操作:

/**
 * @param {DomNode} element - Element to remove namespaced events from.
 * @param {array} keepNamespaces - Array of namespaces not to remove.
 */
function removeOtherNameSpaces(element, keepNamespaces) {
  var events = $._data(element, 'events'),
      $el = $(element);
  
  $.each(events , function(eventName, arr) {    
    $.each(arr, function(_, obj) {
      if (!obj) return;

      if (obj.namespace && $.inArray(obj.namespace, keepNamespaces) === -1) {
        console.log('Removed:: Event:',eventName,', namespace: ', obj.namespace)
        $el.off('.' + obj.namespace);
      }
    });
  });
}

// DEMO
$(document).on('click.click-1', 'p', function() {
  console.log('Namespace: click-1 triggered')
}).on('click.click-2', 'p', function() {
  console.log('Namespace: click-2 triggered')
}).on('mouseenter.mouse-1', 'p', function() {
  console.log('Namespace: mouse-1 triggered')
})

$('button').click(function() {
  var keepNamespaces = ['click-1'];
  removeOtherNameSpaces(document, keepNamespaces)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
  Hover & Click me - before click button
</p>
<button>
  Remove namespace events
</button>

这也可以扩展为仅从特定委托(delegate)目标选择器中删除事件