两个OnClick事件重叠

时间:2014-05-06 08:52:58

标签: javascript jquery

我在元素中有一个元素,当我点击下面的元素时,我希望滑块打开。当我点击最外面的元素时,我希望滑块关闭。

不幸的是,当我点击最外面时,它也会点击底层元素。有没有办法只点击最外面的元素忽略下面元素的点击?这些事件在点击时触发并使用javascript执行。

我尝试使用z-index,但它仍然捕获了点击的底层元素,并且因为这些函数彼此相反,所以没有任何反应。

编辑:在"代码值1000字"尖

var $target = $(this).data('pos', i) //give each li an index #
    $target.data('hpaneloffsetw', $target.find('.hpanel:eq(0)').outerWidth()) //get offset width of each .hpanel DIV (config.dimensions.fullw + any DIV padding)
    $target[haccordion.ismobile? "click" : "mouseenter"](function(){
        haccordion.expandli(config.accordionid, this)
        config.$lastexpanded=$(this)
    })

    if (config.collapsecurrent){ //if previous content should be contracted when expanding current
        $('.close').click(function(){
            $target.stop().animate({width:config.paneldimensions.peekw}, config.speed) //contract previous content
        })
        $target.dblclick(function(){
            $(this).stop().animate({width:config.paneldimensions.peekw}, config.speed) //contract previous content
        })
    }

Because the code is borrowed,我对此并不了解。但基本上我想要" click" :" mousteente r"函数可以单击,而不会干扰.close()。单击

4 个答案:

答案 0 :(得分:6)

听起来你需要停止冒充DOM的点击事件才能被父元素捕获。您可以使用stopPropagation()执行此操作:

$('.close').click(function(e) {
    e.stopPropagation();
    $target.stop().animate({ width: config.paneldimensions.peekw }, config.speed);
})
$target.dblclick(function(e) {
    e.stopPropagation();
    $(this).stop().animate({ width: config.paneldimensions.peekw }, config.speed);
})

答案 1 :(得分:1)

尝试以下fiddle

$("#outer").click(function(){alert("outer clicked")});
$("#inner").click(function(e){
    alert("inner clicked")
    e.stopPropagation();
});

答案 2 :(得分:0)

要识别您“真正”点击的元素,您可以尝试通过访问target property of the jquery-event-object来识别它。

确定您点击的目标后,您可以prevent other event handlers from firing

答案 3 :(得分:0)

使用CSS特定的jquery指向下面的精确元素,使用>指向精确的孩子

table > tbody > tr > td > input[type='text'] 
像这样。