html父级可单击组件中的可单击组件

Question

我有一个Clickable表行，单击该行我正在执行一些操作，并且在那行中，我有一个按钮，上面发生了一些onClick事件。

 <tr onClick={this.update} style={{cursor:'pointer'}}>
                <td className="col-sm-1 col-md-1 text-center"><strong>Some content</strong></td>
                <td className="col-sm-1 col-md-1">
                    <button type="button" className="btn btn-danger pull-right"
                    onClick={this.removeData}>
                    <span className="glyphicon glyphicon-remove"></span>
                    </button>
                </td>
 </tr>

但是，每当我尝试单击tr内部的按钮时，就会触发tr onClick。 我也想根据按钮的点击执行操作。

Answer 1

请看一下这个JS Fiddle示例http://jsfiddle.net/ric/02ofa45c/

'$(document).ready(function () {
  $('.outer').on('click', function () {
    console.log('outer');
  });

  $('.inner').on('click', function (e) {
    e.stopPropagation();
    console.log('inner');
  });
});

Answer 2

将event.stopPropagation()用作按钮的removeData处理程序中的第一条语句。 并确保该event可用作函数参数。

Answer 3

在子项的onclick事件中添加event.stopPropagation() 。 这将防止子事件函数传播到父事件。

在JS或JQuery函数中：

function parentEvent(){
       //perform some action
}

function childEvent(){
       event.stopPropagation()
       //perform some other action
}

希望可以解决您的问题