Question

目前我有一个弹出窗口。

我想点击链接<a>和按钮<button>以外的任何地方隐藏此弹出窗口。

我可以向document添加事件监听器并忽略这两个元素吗？

我尝试了以下操作，但它无法正常工作：

＆＃13;

(function($) {

  $(document).on('click', ':not(a, button)', function(event) {
    event.preventDefault();
    event.stopPropagation();
    console.log(event.target.nodeName);
  });

  /* Other option, also not working properly
  $( document ).not( 'a, button' ).on( 'click', function ( event ) {
  	event.preventDefault();
    event.stopPropagation();
    console.log( event.target.nodeName );
  } );
  */

})(jQuery);

＆＃13;

.container {
  padding: 35px;
  background: grey;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <a href="#" class="link">I'm a link</a>
  <button>I'm a button</button>
</div>

＆＃13;

我知道但仍然感觉不对的选项：

使用if语句：

 if( event.target.nodeName.toLowerCase() !== 'a' or event.target.nodeName.toLowerCase() !== 'button' ) {
      // Do w/e I want to
 }

或使用以下方式停止传播：

$( 'a, button' ).on( 'click', function( event ) {
    event.stopPropagation();
} );

Answer 1

我想您已经问过event.target是a还是button是这样的：

if (!$(event.target).closest("a, button").length)

希望这会对你有所帮助。

(function($) {

  $(document).on('click', function(event) {
    if (!$(event.target).closest("a, button").length) {
      console.log(event.target.nodeName);
    }

  });

})(jQuery);

.container {
  padding: 35px;
  background: grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <a href="#" class="link">I'm a link</a>
  <button>I'm a button</button>
</div>

Answer 2

您知道自class Rectangle attr_reader :width, :height def area width * height end private attr_writer :width, :height def initialize(width, height) self.width, self.height = width, height end end rect = Rectangle.new(10, 20) p rect.area获得了element，只是检查它是event.target.nodeName还是A，如果是，只需BUTTON

return

(function($) {

  $(".container").on('click', function(event) {
    if(event.target.nodeName=='A' || event.target.nodeName=='BUTTON')
      return;
    console.log(event.target.nodeName);
  });
})(jQuery);

.container {
  padding: 35px;
  background: grey;
}

Answer 3

您问题的最简单解决方案如下：

$(document).on('click', function(event) {
    if (!$(event.target).closest("a, button").length) {
      if(event.target.nodeName=="A"||event.target.nodeName=="BUTTON"){
     //DON'T DO ANY THING
      }
      else{
     //SHOW THE POPUP
     }

    }

  });
Hope this helps!!!!!

检测文档上的单击但忽略特定元素

3 个答案: