如何構建定位在另一個按鈕上的按鈕？

Question

我正在使用一個自制網格，其中每個元素都是一個按鈕。模板是用於按鈕的造型和看起來像這樣：

<div id='cellTemplate'> 
    <p>some content</p> 
</div> 

正如你可以在上面看到，模板的構造與複製每個小區的含股利。裏面，可以是任何東西，但在大多數情況下，有一個'p'標籤和一些文字內容。

我想要做的是構建一個刪除按鈕，但我遇到的問題是單擊刪除按鈕也會觸發包含div的單擊處理程序。我想創建一個刪除按鈕，它不會觸發包含div的點擊處理程序。

我已經創建了目前爲止還沒有解決的示例html。

<div id='cellTemplate'> 
    <p>some content</p> 
    <div class='deleteButton'>(X)</div> 
</div> 

由於框架的構建，'cellTemplate'默認會爲其指定一個點擊處理程序。

Answer 1

stopPropagation正是用於此目的。它可以防止事件冒泡到父元素。

$("something").click(function(e){ 
    e.stopPropagation(); 
    // do stuff 
}); 

Answer 2

您還可以使用event.target並從「細胞」或「行」管理事件，如果它適合你的應用程序更好地

有不只是需要討論的目的在這裏額外的代碼

$('.cellTemplate').click(function(event){ 
    var tgt=event.target; 
    var tagName=tgt.tagName;         
    var $tgt=$(tgt);  

    if(tagName=='p'){ 
     $tgt.doAnEdit(); 
    }else if($tgt.is('.delete')){ 
     $(this).parent.remove(); 
    } 
})