Question

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

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

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

CODE

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

Answer 2

您需要检查event.target：

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

Answer 3

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

Answer 4

在h2标签内输入

，你可以在他的onclick上添加一个event.stopPropagation（）。

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

event.stopPropagation（）将停止点击事件的传播。

如何避免触发单击事件

4 个答案: