檢測文檔上的點擊，但忽略特定元素

我想要點擊除鏈接<a>和按鈕<button>以外的任何地方時隱藏此彈出窗口。

我可以添加事件偵聽器document並忽略這些2個元素？

我嘗試以下，但它不能正常工作：

(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) { 
 
    \t event.preventDefault(); 
 
    event.stopPropagation(); 
 
    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>

選項我知道約，但仍然覺得不妥：

使用的，如果像這樣的語句：

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

或停止親pagation使用：

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

來源

2017-02-15 Ron van der Heijden

只使用'$（ 'A，按鈕'）點擊（函數（）{ 返回假。 }）;' –

@HappyCoding使用它將打破所有鏈接和按鈕.. –

我想你問，如果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>

來源

2017-02-15 12:43:09

你知道你是從event.target.nodeName越來越element，那麼就檢查它是否是要麼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; 
 
}

<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>

來源

2017-02-15 12:46:15

你的問題最簡單的辦法如下：

$(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!!!!!

來源

2017-02-15 12:49:17

檢測文檔上的點擊，但忽略特定元素

回答

相關問題