Question

我正试图让一个div切换到＆＃34; contact_heading＆＃34;单击div但是如果按下编辑，保存或删除按钮，我不想切换div。我希望用户返回单击栏上的任何位置，但编辑，保存或删除按钮以生成切换。这是一个小提琴：http://jsfiddle.net/j6LSA/

JQuery的

//expand contacts
$('#content').on('click', '.rooms_contact_container .contact_heading', function() {
    $(this).parents('.rooms_contact_container').find('.contact_expanded').slideToggle();
});
//edit contact 
$('#content').on('click', '.rooms_contact_container .contact_heading .buttons .edit', function() {
    //no slide
    alert('edit');
});
//delete contact 
$('#content').on('click', '.rooms_contact_container .contact_heading .buttons .delete', function() {
    //no slide
    alert('delete');
});

HTML

<div id="content">
    <div class="rooms_contact_container">
        <div class="contact_heading">
            <div class="contact_contact">Contact</div>
            <div class="contact_name">Smith, John</div>
            <div class="contact_phone">555-555-5555</div>
            <div class="buttons">
                <div class="expand">^</div>
                <div class="delete">X</div>
                <div class="edit">E</div>
                <div class="save">S</div>
            </div>
        </div>
        <div class="contact_expanded">
            Some Content
        </div>
    </div>
</div>

Answer 1

您可以从事件处理程序返回false，这将阻止为父级触发事件。

//edit contact 
$('#content').on('click', '.rooms_contact_container .contact_heading .buttons .edit', function() {
    //no slide
    alert('edit');
    return false;
});
//delete contact 
$('#content').on('click', '.rooms_contact_container .contact_heading .buttons .delete', function() {
    //no slide
    alert('delete');
    return false;
});

http://jsfiddle.net/j6LSA/1/

Answer 2

您也可以采用此解决方案

$('#content').on('click', '.rooms_contact_container .contact_heading', function(e) {
    var target = $(e.target);

    if(!(target.hasClass("edit")||target.hasClass("delete")||target.hasClass("save"))){

        $(this).parents('.rooms_contact_container').find('.contact_expanded').slideToggle();

     }
});

正在使用 DEMO

或

而不是

target.hasClass("edit")||target.hasClass("delete")||target.hasClass("save")

您可以使用

target.is(".edit,.save,.delete")

Wroking DEMO

Jquery单击选择性子元素和父元素

JQuery的

HTML

2 个答案: