上點擊全身除特定元素

Question

這裏的特定元素是我的代碼：

$(document).click(function(e){ 
 
    if($(e.target).closest("#myid").length > 0) { 
 
    return false; 
 
    } 
 
    alert('clicked'); 
 
});

#myid{ 
 
    border: 1px solid; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <div id="myid"> 
 
    something <br> 
 
    <a target="_blank" href="#">link</a> 
 
    <p>paragraph</p> 
 
    </div> 
 
</div>

正如你看到的，當你點擊了div#myid元素，警報將被顯示。我希望當您點擊link時也會顯示該警報。我怎樣才能做到這一點？

Answer 1

要做到這一點，你可以添加其他條件，你如果去掉了#myid元素中的a元素。試試這個：

$(document).click(function(e) { 
 
    var $target = $(e.target); 
 
    if ($target.closest("#myid").length > 0 && $target.is(':not(a)')) { 
 
    return false; 
 
    } 
 
    alert('clicked'); 
 
});

#myid { 
 
    border: 1px solid; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <div id="myid"> 
 
    something <br> 
 
    <a target="_blank" href="#">link</a> 
 
    <p>paragraph</p> 
 
    </div> 
 
</div>

Answer 2

爲什麼不簡單地將事件監聽器添加到#myid？

$('#myid').on('click', function(event) { 
 
    alert('clicked'); 
 
})

#myid{ 
 
    border: 1px solid; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <div id="myid"> 
 
    something <br> 
 
    <a target="_blank" href="#">link</a> 
 
    <p>paragraph</p> 
 
    </div> 
 
</div>

Answer 3

我已經添加了另一檢查的過程如下：

if($(e.target).closest("#myid").length > 0 && $(e.target).attr("id") !=="linkID") 

添加你的鏈接id屬性爲：

<a target="_blank" id="linkID" href="#">link</a> 

請參閱小提琴。它的做工精細

$(document).click(function(e){ 
 
    if($(e.target).closest("#myid").length > 0 && $(e.target).attr("id") !=="linkID") { 
 
    return false; 
 
    } 
 
    alert('clicked'); 
 
});

#myid{ 
 
    border: 1px solid; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <div id="myid"> 
 
    something <br> 
 
    <a target="_blank" id="linkID" href="#">link</a> 
 
    <p>paragraph</p> 
 
    </div> 
 
</div>

Answer 4

你需要得到您單擊的當前目標。在這種情況下，你需要在當前目標（它將成爲錨點）之前區別開來。

您可以使用.is()jQuery method來判斷您點擊了哪個元素。 實施例：

$(document).click(function(e) { 
    if($(e.target).is("a")){ 
    alert("You clicked the anchor"); 
    e.stopPropagation(); 
    return; 
    } 

    if ($(e.target).closest("#myid").length > 0) { 
    return false; 
    } 

    alert('clicked'); 
}); 

我前進到檢查是否點擊的元素是錨元件之前加入的條件。更好地添加一些內容來獨特地選擇它，比如一個班級或一個Id。

我使用.is()方法，根據您傳遞的查詢特定DOM元素的條件返回true或false。在這種情況下，我檢查元素是否是錨標籤。請注意，我使用.stopPropagation()method來防止事件冒起來，這在這種情況下不需要，但在這種情況下，這是一種很好的做法，因爲這可能會導致意想不到的行爲。最後，不要忘記返回以避免執行後面的代碼。

如果您不需要保持錨點的默認行爲，即不想導航到href屬性中指定的位置，請防止使用event.preventDefault()方法或返回false。

檢查小提琴here。