html中父可点击组件内的可点击组件答案

【问题标题】：Clickable component inside a parent clickable component in htmlhtml中父可点击组件内的可点击组件
【发布时间】：2015-12-08 18:53:51
【问题描述】：

我有一个可点击的表格行，点击它我正在执行一些操作，在该行内我有一个按钮，上面发生了一些 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。我也想根据点击按钮执行操作。

【问题讨论】：

建议你看看stackoverflow.com/questions/4616694/…
在阅读以上链接@JacqueGoupil 后了解需要做什么

标签： javascript html reactjs

【解决方案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');
  });
});

【讨论】：

【解决方案2】：

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

【讨论】：

知道了。在 React 事件处理程序中有 SyntheticEvent 的实例，这是一个跨浏览器包装器，我将在其上调用 stopPropagation()

【解决方案3】：

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

在 JS 或 JQuery 函数中：

function parentEvent(){
       //perform some action
}

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

这有望解决您的问题

【讨论】：