避免jQuery的點擊功能上<a href=""> elements

Question

I do have the following click function on a div element. Inside the div element are links. How can I stop the click function on this links? I tried z-index but it doesn't work.

$('.thumb.flip').click(function() { 
if ($(this).find('.thumb-wrapper').hasClass('flipIt')) { 
    $(this).find('.thumb-wrapper').removeClass('flipIt'); 
} else { 
    $(this).find('.thumb-wrapper').addClass('flipIt'); 
} 
}); 

Answer 1

Add code to stop the click from propagating from the links up the DOM to the div:

$('a').click(function(e){e.stopPropagation();}) 

See http://api.jquery.com/event.stoppropagation/

jsFiddle example

Answer 2

Try e.preventDefault()

$('.thumb.flip').click(function (e) { 
    e.preventDefault(); 
    if ($(this).find('.thumb-wrapper').hasClass('flipIt')) { 
     $(this).find('.thumb-wrapper').removeClass('flipIt'); 
    } else { 
     $(this).find('.thumb-wrapper').addClass('flipIt'); 
    } 
}); 

Answer 3

捕獲事件對象：

$('.thumb.flip').click(function (evt) { 

測試，看看被點擊了什麼樣的元素：

if (evt.target.tagName.toLowerCase() === "a") { 
    return true; 
} 

Answer 4

使用鼠標down事件並在你的處理程序中調用event.stopPropagation（）和event.pr eventDefault（）;

Answer 5

如果點擊的目標是a只是返回否則爲假做正常的東西......

$('.thumb.flip').click(function (e) { 
    if ($(e.target).is('a')) { 
     return false; 
    } 
}); 

z-index什麼都不會做，但是如果你要防止點擊來自CSS可以pointer-events屬性添加到鏈接並設置值none。這將禁用鏈接上的所有事件。

Answer 6

$('.thumb.flip').click(function (e) { 
    if (e.target.nodeName==="A") { //if target is an anchor, ignore 
     return; 
    } 
    $(this).find('.thumb-wrapper').toggleClass('flipIt') //toggle class 
}); 

Answer 7

如果你可以編輯標記做到這一點：

<a href="javascript:void(0);" ></a>