Question

我写了这一点来说明我的问题，但基本上我在div上有一个链接按钮，通过点击切换另一个div，但我希望链接按钮不切换，并免于点击事件。

我也不能使用cursor-event：none;技巧，因为我必须使用IE工作。

这是javascript：

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

我希望点击一个应该在#expandingHeader之上的div不应该导致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

您可以检查event对象

$(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

Demo on 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();
  })
});

带有不可点击元素的可点击div。

4 个答案: