具有不可點擊元素的可點擊div。

Question

http://codepen.io/anon/pen/zxoYBN

我寫了這小部分來說明我的問題，但是本質上我在div上有一個linkbutton，它可以通過click切換另一個div，但是我希望linkbutton不能切換，並且不受click事件的影響。

我也不能使用cursor-event：none; 絕招，因為我必須使用IE才能完成這項工作。

這是JavaScript：

$(function(){
  $('#expandingHeader').click(function(){
    $('#expandingContent').slideToggle();
  })
})

我希望單擊應該在#expandingHeader頂部的div不會導致clickevent，但確實會導致clickevent。 任何幫助，將不勝感激。

Answer 1

$(function(){
  $('#expandingHeader').click(function(){
    $('#expandingContent').slideToggle();
  })
  $('#expandingHeader>a').click(function(e){
    e.stopPropagation();
  })
})

Answer 2

使用javascript阻止href的默認操作。

$('#no-toggle-link').click(function(){
    alert("You can redirect the user from here instead of an alert!");
    return(false);
}) 

檢查我的例子：
http://codepen.io/anon/pen/qEqBaP

Answer 3

您可以對事件對象進行檢查

$(function(){
 $('#expandingHeader').click(function(e){
   if (e.target.tagName === 'A') { // simply call the return when found the target is action link <a>
     return;
   }
 $('#expandingContent').slideToggle();
})
})

Answer 4

關於Codepen的演示 （ http://codepen.io/anon/pen/vEyYyr ）

沒有任何其他事件偵聽器。
您可以檢查單擊了哪種元素（可通過event.target訪問），如果它是一個鏈接，則無需切換內容。

$(function() {
  $('#expandingHeader').click(function(event) {
    // Check if we clicked a link, and if so, do not proceed.
    // Check only immediate children of the header.
    if (event.target.parentNode === event.currentTarget
        && event.target.nodeName === 'A') {
        return;
    }

    $('#expandingContent').slideToggle();
  })
});