CSS隔離子指針事件

Question

我希望能夠在指標事件上的複選框分開，使得它不會觸發打開一個模態父指針事件。

這裏是在我的問題上GIF：https://gyazo.com/856a84242349609f4506095de33ee1df

爲了詳細說明這到底是怎麼回事，錶行是可以點擊的，並會打開一個模式，將顯示有關該行的點擊擴展信息。 除了這個我有此行具有click事件本身就是一個複選框，我想這個複選框從觸發「行」 click事件隔離開來。

Answer 1

您需要在​​功能的複選框使用e.stopPropagation()。這將防止從複選框冒泡到父行元素的點擊事件。

class App extends React.Component { 
 
    handleCheckClick = (e) => { 
 
    console.log('checkbox clicked'); 
 
    e.stopPropagation(); 
 
    } 
 
    handleRowClick = (e) => { 
 
    console.log('row clicked'); 
 
    
 
    } 
 
    render() { 
 
    return (<table> 
 
     <thead> 
 
     <tr> 
 
     <th>First Name</th> 
 
     <th>Last Name</th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr onClick={this.handleRowClick}> 
 
      <td> 
 
      <input type="checkbox" onClick={this.handleCheckClick}/> 
 
      </td> 
 
      <td>Abc</td><td>XYZ</td> 
 
      
 
     </tr> 
 
     </tbody> 
 
    </table>) 
 
    } 
 

 
} 
 

 
ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script> 
 
<div id="app"></div>