Question

假设有一些元素浮动，当我点击ANYTHING（divs，body，等等......）但我指定的那个（例如div＃special）时，我正试图做一些。

我想知道除了我能想到的以下方法之外还有更好的方法来实现这个目标......

$(document).bind('click', function(e) {
    get mouse position x, y
    get the element (div#special in this case) position x, y
    get the element width and height
    determine if the mouse is inside the element
    if(inside)
        do nothing
    else
        do something
});

Answer 1

要处理“在 点击此 元素时<执行此 ”情况，一般方法是向该事件添加一个事件处理程序document处理“执行此操作”的情况，然后将另一个事件处理程序添加到“除此”元素之外，这只会阻止点击事件冒泡到document;

$('#special').on('click', function(e) {
    e.stopPropagation();
});

$(document).on('click', function (e) {
 // Do whatever you want; the event that'd fire if the "special" element has been clicked on has been cancelled.
});

见the event.stopPropagation() documentation。对于那些使用早于jQuery 1.7版本的人（就像问这个问题的情况一样），你将无法使用on();而是简单地将on()的2次使用替换为bind();在这种情况下签名是相同的。

在这里演示; http://jsfiddle.net/HBbVC/

Answer 2

您也可以

$(document).bind('click', function(e) {
  if(!$(e.target).is('#special')) {
    // do something
  }
});

或者如果div＃special具有您可以执行的子元素

$(document).bind('click', function(e) {
  if($(e.target).closest('#special').length === 0) {
    // do something
  }
});

Answer 3

我过去这样做过：

jQuery("body").bind("click", function(e)
{
    var obj = (e.target ? e.target : e.srcElement);
    if (obj.tagName != 'div' && obj.id != 'special')
    {
        // Perform your click action. 
        return false;
    }
});

只有在你没有点击div＃special时才会执行。老实说，可能有更好的方法来做到这一点，但这对我有用。

Answer 4

你需要做不同的绑定，不需要在一个函数中处理所有这些点击

$('body').bind('click', function(e){
  bodyClickEvent();
});
$('div.floating').bind('click',function(e){
  elementClickEvent(this);
  e.stopPropagation(); //prevents bodyClickEvent
});
  $('div#special').bind('click', function(){
  e.stopPropagation(); //prevents bodyClickEvent
});

Answer 5

我今天写了一篇关于我遇到的问题，因为我不喜欢在整个时间内将点击事件绑定到文档，所以对于我的场景，这可以使用函数的回调。

$('#button').click(function(){
        //when the notification icon is clicked open the menu
        $('#menu').slideToggle('slow', function(){
            //then bind the close event to html so it closes when you mouse off it.
            $('html').bind('click', function(e){
                $('#menu').slideToggle('slow', function(){
                    //once html has been clicked and the menu has closed, unbind the html click so nothing else has to lag up
                    $('html').unbind('click');
                });
            });
            $('#menu').bind('click', function(e){
                //as when we click inside the menu it bubbles up and closes the menu when it hits html we have to stop the propagation while its open
                e.stopPropagation();
                //once propagation has been successful! and not letting the menu open/close we can unbind this as we dont need it!
                $('#menu').unbind('click');
            });
        });
    });

Answer 6

我曾经比其他答案更轻松地解决了这个问题，但不必担心点击确实会落在DOM树上

只需检查您的元素是否悬停;）

$(document).on('click', function (e) {

  if($('#special:hover').length > 0){
    // on our special element
  }else{
    // not on our special element
  }

});

欢呼

jQuery绑定点击* ANYTHING 但 ELEMENT *

6 个答案:

jQuery绑定点击* ANYTHING *但* ELEMENT *

6 个答案:

jQuery绑定点击* ANYTHING 但 ELEMENT *