Question

我正在使用自制网格，其中每个元素都是一个按钮。模板用于按钮样式，看起来像这样：

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

正如您在上面所看到的，模板由一个包含div构成，该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();
    }
})

如何构建一个位于另一个按钮上的按钮？

2 个答案: