CSS隔离子指针事件

-2

我希望能够在指标事件上的复选框分开，使得它不会触发打开一个模态父指针事件。CSS隔离子指针事件

这里是在我的问题上GIF：https://gyazo.com/856a84242349609f4506095de33ee1df

为了详细说明这到底是怎么回事，表行是可以点击的，并会打开一个模式，将显示有关该行的点击扩展信息。除了这个我有此行具有click事件本身就是一个复选框，我想这个复选框从触发“行” click事件隔离开来。

来源

2016-11-11 lax1n

请提供[MCVE] –

首先提供你的榜样。其次，很容易防止一个事件的冒泡。但是既然你不显示你的代码，我们只能提供你对我们答案的看法。查看@ AllDani.com为您提供的链接 –

我明白你的意思，但这个问题的复杂性只是想找到一种方法将一个指针事件与其父指针事件隔离开来。我认为这足够容易理解，但我当然会尝试改善我未来的问题:) – lax1n

您需要在功能的复选框使用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>

来源

2016-11-11 13:48:40

CSS隔离子指针事件

回答

相关问题