2015-10-16 153 views
0

在我的應用程序中,我想在用戶單擊面板標題時調整窗口大小,但該標題包含一個子元素按鈕,該子元素按鈕上綁定了另一個事件處理程序。我需要做的是,當用戶點擊該按鈕時,不會調用任何調整大小的函數。我嘗試了許多變化,但都沒有工作。從元素的子元素中刪除特定的事件處理程序

HTML:

<div class="panel-heading" style="cursor:pointer"> 
    <div class="pull-right"> 
     <button type="button" class="btn btn-danger btn-xs" id="btn-subject-remove"><span class="glyphicon glyphicon-remove"></span> Remove</button> 
    </div> 
</div> 

我的JQ是:

$('#btn-subject-remove').on('click',btnRemoveSubjectsClick); 
$('#subscribers-row .panel-heading').on('click',btnResizeClick); 

我都試過了,但他們沒有工作:

$('#subscribers-row .panel-heading').off('click','#btn-subject-remove',btnResizeClick); 
$('#btn-subject-remove').off('click',btnResizeClick); 
$('#subscribers-row .panel-heading').on('click',btnResizeClick).children().click(function(e){return false}); 

我也試過在btnResizeClick檢查函數什麼元素被點擊,如果它是刪除按鈕然後返回假,但點擊的元素仍然是面板標題

有什麼建議嗎?

+0

請參見[56, 「問題‘’包括在他們的頭銜?」 標籤(http://meta.stackexchange.com/questions/ 19190/should-questions-include-tags-in-titles),其中共識是「不,他們不應該」! –

回答

1

綁定兒童的點擊事件並使用e.stopPropagation()來阻止父級點擊事件。

在一個簡單的例子:

$(function() { 
 
    $('div').on('click', function() { 
 
     $(this).toggleClass('redBg'); 
 
    }); 
 
    $('div>*').on('click', function(e) { 
 
     e.stopPropagation(); 
 
    }); 
 
});
div { 
 
    background: green; 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 
span { 
 
    display: block; 
 
    height: 50px; 
 
    background: yellow; 
 
} 
 
.redBg { 
 
    background: red; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    With some text 
 
    <span> in a span </span> 
 
</div>

相關問題