使用.data（）方法將開關傳遞到函數

Question

當單擊div.artLink（參見下文）時，我調用了模態對話框。然而，當訪問者點擊一個錨點元素時，我想抑制模態對話。

我試過使用.data（）方法來傳遞一個錨被點擊到我的模態函數，但沒有成功的事實。 我對jQuery的知識有限，所以我很抱歉，如果這似乎是一個天真的問題...

任何人都可以推動我在正確的方向嗎？

<div class="artLink"> 
    <img src="/assets/press/article03_thumb.jpg" alt="" /> 
    <div class="article"> 
     <img src="/assets/press/article03_main.jpg" alt="" /> 
    </div> 
    <ul class="paLinks"> 
     <li>MODAL DIALOGUE</li> 
     <li><a href="<url>" >EXTERNAL LINK</a></li> 
    </ul> 
</div> 

腳本是

// Detect if an anchor has been clicked... 
$('ul.paLinks a').on('click', function() { 
    $(this).data('clicked', true); 
}); 

// Load modal dialog on click 
$('.artLink').click(function() {        

    // Only activate modal dialogue if an anchor has NOT been clicked... 
    if (!$(this).data('clicked')) { 
     $('.article',this).modal(...); 
    } 
}); 

Answer 1

您可以使用一個簡單的檢查。只要確保e.target.nodeName !== 'A'。

Demo

$('.artLink').click(function(e){ 

    if(e.target.nodeName !== 'A') {// or use jQuery.fn.is for complex criteria 
     console.log(this); //invoke modal logic here 
    } 
}); 

Answer 2

使用event.stopPropagation()。它阻止事件的DOM樹冒泡並使用event.preventDefault()停止HREF的默認操作在標籤

// Detect if an anchor has been clicked... 
$('ul.paLinks a').on('click', function(event) { 
    event.stopPropagation(); 
    event.preventDefault(); 
    $(this).data('clicked', true); 
}); 

// Load modal dialog on click 
$('.artLink').click(function() {        

    // Only activate modal dialogue if an anchor has NOT been clicked... 
    if (!$(this).data('clicked')) { 
     $('.article',this).modal(...); 
    } 
});