$(document).click(function(e){ var box = $('.box'); //目標區域 if(!box.is(e.target) && box.has(e.target).length === 0){//Mark console.log(其他區域); // 功能代碼 } }); /* Mark的原理： 判斷點擊事件發生在目標區域外的條件是： 1. 點擊事件的對象不是目標區域本身 2. 事件對象同時也不是目標區域的子元素 */
is()方法——用於篩選
//語法 jQueryObject.is(expr)； //返回值 is()函數的返回值為Boolean類型，true或者false； 只要其中至少有一個元素符合給定的表達式就返回true，否則就返回false。
//說明1、is()方法用於判斷與當前jQuery對象相匹配的元素是否符合指定的表達式。
2、這里的表達式包括：選擇器(字符串)、DOM元素(Element)、jQuery對象、函數。
3、它是根據選擇器、DOM元素或jQuery對象來檢測匹配元素集合。
has()方法——用於篩選
//語法 jQueryObject.has(expr)； //返回值 返回值為jQuery類型； 返回一個新的jQuery對象； 該對象中封裝了所有符合篩選條件的，並且與當前指定的jQuery對象相匹配的元素。 //說明 1、has()函數用於篩選出包含特定后代的元素，返回的是特定的jQuery對象。 2、特定的后代元素：指該元素至少有一個后代元素能滿足指定的表達式。 3、這里的表達式包括：選擇器(字符串)、DOM元素(Element)、jQuery對象。 4、其實，該函數是根據后代元素來篩選的父級元素的；
如果與當前的jQuery對象相匹配的每一個元素，它們的后代元素只要有一個元素符合指定的表達式，那么該元素就滿足篩選條件。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>.has方法(一個選擇器字符串|一個DOM元素)</title> <script src="../jquery-3.2.1.min.js"></script> <script> $(document).ready(function() { var oLi = $('li').has('ul'); oLi.css('background-color', '#f40'); console.log(oLi);//會返回符合條件的所有li元素，匹配到的元素是一個集合 console.log(oLi[0]);//返回符合條件的第1個li元素 console.log(oLi[1]);//返回符合條件的第2個li元素 console.log(oLi.length);//2；即返回符合條件的元素個數 $(document).on('click', function(event) { var obj = $(".list2"); //判斷當前點擊的元素是否為class="list2"的li元素，是則執行下面的代碼 if( obj.is(event.target)){//如果此時點擊的是它的子元素或者其他元素，則is()方法返回false $(".list2").attr("click","self"); } //問： 如何判斷當前點擊的元素是不是目標元素的子元素呢？ //答：根據event.target來篩選符合條件的obj，length屬性為0肯定說明event.target不符合篩選條件。 //判斷當前點擊的元素是否為class="list2"的li元素的子元素，是則執行下面的代碼 if( obj.has(event.target).length !== 0 ){ $(".list2").attr("click","child"); } //注：下面兩種寫法等價，一個是js對象，一個是jQuery對象 /* *（1）$(".list2")是jQuery對象的寫法。 *（2）$(".list2")[0]是將jQuery對象轉換為了JavaScript對象。 */ // if ( event.target != $(".list2")[0] && $(".list2").has(event.target).length === 0) //obj.has(event.target).length === 0)說明：根據當前點擊的元素並沒有篩選出任何一個符合條件的父元素。 //換句話說就是，當前點擊的對象並不在目標元素obj的范圍之內，即點擊的是其他DOM元素。 if ( !obj.is(event.target) && obj.has(event.target).length === 0) { console.log(event.target); $(".list2").attr('click',"other"); } switch($(".list2").attr("click")){ case "self": alert("當前點擊的是list item 2元素"); break; case "child": alert("當前點擊的是list item 2的子元素"); break; case "other": alert("當前點擊的是其他元素"); } }); }); </script> </head> <body> <h3>$('ele').has(一個選擇器字符串|一個DOM元素)</h3> <h3>$('ele').has()方法將會從給定的jQuery對象中重新創建一組匹配的對象。</h3> <h3>提供的選擇器會一一測試原先那些對象的后代，含有匹配后代的對象將得以保留。</h3> <h3>如果找不到指定jQuery對象內所包含的需要匹配的元素，則$('li').has('ul').length === 0</h3> <ul> <li class="list1">list item 1</li> <li class="list2">list item 2 <ul> <li>list item 2-a</li> <li>list item 2-b</li> </ul> <p>1234546</p> </li> <li class="list3">list item 3 <ul> <li>list item 3-a</li> <li>list item 3-b</li> </ul> </li> <li class="list4">list item 4</li> </ul> </body> </html>
效果圖
