如何避免触发点击事件答案

【问题标题】：How To Avoid Triggering A Click Event如何避免触发点击事件
【发布时间】：2011-10-12 21:05:26
【问题描述】：

我在 jQuery 中有一个切换面板脚本，当我单击 h2 元素时，我的内容会展开和折叠。

问题是我在那个 h2 元素中有输入字段，当我尝试使用 jEditable 编辑某些内容时会出现这种情况。我想找到一种方法，以便当我单击该输入字段时，我不会收到单击事件。

我的猜测是以某种方式使用 :not 选择器方法，但我尝试了一堆迭代无济于事。

代码

    //toggle panel content
    $(".panelcollapsed h2").click(function(){
        $(this).siblings(".panelcontent").slideToggle(100, 'easeInQuad');
    });

【问题讨论】：

标签： jquery jeditable

【解决方案1】：

您可以测试该事件是否源自 input 元素，如果是则忽略它：

$(".panelcollapsed h2").click(function(e){
    if (e.target.tagName.toLowerCase() === 'input') {
        return;
    }

    $(this).siblings(".panelcontent").slideToggle(100, 'easeInQuad');
});

这会检查e.target 的tagName，即事件起源的元素，看它是否与input 相同。如果是这样，return 将退出事件处理程序。

【讨论】：

【解决方案2】：

您需要查看event.target:

//toggle panel content
$(".panelcollapsed h2").click(function(e){
    if ($(e.target).is('h2'))
       $(this).siblings(".panelcontent").slideToggle(100, 'easeInQuad');
});

【讨论】：

是的，这是另一种方式，但速度要慢得多。它也会失败，例如，<h2><span>foo</span></h2>。

【解决方案3】：

不太确定你的 DOM 是什么样子，所以只是在这里在黑暗中拍摄。也许，在输入的点击函数中使用e.stopPropagation() 可以解决问题？

【讨论】：

【解决方案4】：

在 h2 标签内的输入中，您可以在他的 onclick 上添加一个 event.stopPropagation()。

$('#inputInsideH2').click(function(event){
   event.stopPropagation();
   $(this).focus();
};

event.stopPropagation() 将停止点击事件的传播。

【讨论】：