jquery - 如何避免触发点击事件

Question

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

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

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

代码

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

Answer 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 退出事件处理程序。