html

时间:2015-12-08 18:53:52

标签: javascript html reactjs

我点击了一个可点击的表格行,我正在执行一些操作,在该行中,我有一个按钮,其上发生了一些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就会被触发。 我想基于点击按钮执行操作。

3 个答案:

答案 0 :(得分:2)

Please, take a look at this JS Fiddle example http://jsfiddle.net/ric/02ofa45c/

Select col1, col2 from table1
    where col1 like '%word%'

答案 1 :(得分:1)

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

答案 2 :(得分:1)

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

在JS或JQuery函数中:

function parentEvent(){
       //perform some action
}

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

这有望解决您的问题