ポインタイベントをチェックボックスで区切って、モーダルを開く親ポインタイベントをトリガしないようにしたい。ここでcss隔離子ポインタイベント
は私の問題を示すGIFです：https://gyazo.com/856a84242349609f4506095de33ee1df
ここで何が起こっているかについて詳しく説明するには、テーブルの行はクリック可能で、クリックされた行に関する拡張情報を表示しますモーダルを開きます。 これに加えて、この行にはクリックイベントがあり、このチェックボックスをクリックして「行」クリックイベントを発生させないようにするチェックボックスがあります。
チェックボックスの機能では、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>
[MCVE] –
まずあなたの例を提供してください。第二に、非常に簡単に一つのイベントのバブリングを防ぐことです。しかし、コードを表示していないので、私たちはあなたに答えを与えることができます。 @ AllDani.comが提供しているリンクを参照してください。 –
あなたが言っていることを理解していますが、この問題の複雑さは、単純にポインタイベントを親ポインタイベントから切り離す方法を見つけることでした。私はこれが十分に理解できると思ったが、私はもちろん私の将来の質問をより良くしようとするだろう:) – lax1n