gán sự kiện nhấp chuột vào div nhưng không được neo trong đó

Question

Câu hỏi jquery.

Tôi có div chứa văn bản và thẻ neo.

Tôi muốn chỉ định một sự kiện nhấp chuột cho thẻ div và nội dung của thẻ EXCLUDING the anchor tag.

Vì vậy, khi tôi nhấp vào div, một cửa sổ cảnh báo bật lên. Nhưng nếu tôi nhấp vào neo (đó là trong div), cảnh báo sẽ không xảy ra.

Các div sẽ là một cái gì đó như thế này:

<div id="myDiv"> 
    This is the content of the div. 
    <img src="blah.jpg" /> 
    <a href="somewhere.html">Click here</a>. 
    Some more content. 
</div> 

Bất kỳ ý tưởng? Tôi đang sử dụng jquery để gán sự kiện click vào div.

Answer 1

Bạn có thể kiểm tra các mục tiêu của nhấp chuột từ <a> không có trẻ em, ví dụ:

$("#myDiv").click(function(e) { 
    if(e.target.nodeName == 'A') return; 
    //click handler code 
}); 

Answer 2

Mở rộng về câu trả lời của Nick, sau đây là những gì tôi đã kết thúc sử dụng vì nó chiếm thẻ lồng nhau.

function handleClick(e) { 
    var $current = $(e.target); 

    // return if we don't want to override another click event 
    // check current tag 
    var tags = ['A', 'BUTTON', 'INPUT']; 
    if (tags.indexOf(e.target.tagName) >= 0) 
     return; 
    // check parent tags 
    var ignoreClick = false; 
    $.each(tags, function(i, tag) { 
     console.log('checking tag', tag); 
     if ($current.parents(tag).length) { 
     ignoreClick = true; 
     return; 
     } 
    }); 
    if (ignoreClick) 
     return; 

    // do your normal click stuff here 
} 

JsFiddle