单击表中的按钮会触发按钮和表事件

Question

我有一个表，其中显示某些组件的信息，并且在表的右侧，我有一个删除按钮。 到目前为止，我已经有了它，因此在单击组件行时，它将带您到新页面。 由于我的删除按钮也在该行上，因此单击该按钮会将我带到该页面，而不是删除组件。 有没有一种方法可以使单击时仅触发按钮事件，而不是使表的行事件触发？ 这是我的HTML外观：

{{#components}}
<tr class="component" data-id={{id}} data-type={{type}}>
        <td>{{general_name}}</td>
        <td>{{type}}</td>
        <td>
            <button class="btn btn-danger btn-xs glyphicon glyphicon-remove pull-right delete" id="remove" data-id={{id}} data-type={{type}}></button>
        </td>   
    </tr>
{{/components}}

这是我遇到的javascript事件，应该将点击路由到正确的位置：

'click #remove' : 'deleteComponent',
'click .component': 'openComponent',

我尝试在按钮上使用jQuery的removeClass（“ component”），但这似乎不起作用。 有任何想法吗？

Answer 1

event.stopImmediatePropagation()

停止事件传播。 将以上行放在deletecomponent（删除事件）方法中。

Answer 2

单击按钮时，可以使用以下方式停止事件传播 ：

$('button').click(function(event) {
  event.stopPropagation();
  //set up your normal button code here...
});