我有这种情况,当单击父元素时,它会翻转以显示具有不同颜色的子元素。不幸的是,当用户单击其中一种颜色时,还会触发父项上的“单击”事件。
单击孩子时,如何停止父事件触发?
我想知道可能的解决方案:
CSS ?单击子级时, 将pointer-events : none类追加到父级。但是,这意味着pointer-events以后需要清除父类。
pointer-events : none
pointer-events
使用Ref 吗? 记录ref父React元素的,然后单击子元素,将event.targetref与ref 进行比较?我不喜欢这样,因为我不喜欢全球化ref。
ref
React
event.target
想法和更好的解决方案将不胜感激。问题是:单击孩子时,如何停止父事件触发?
您可以使用 stopPropagation
stopPropagation
stopPropagation -防止在冒泡阶段进一步传播当前事件
var App = React.createClass({ handleParentClick: function (e) { console.log('parent'); }, handleChildClick: function (e) { e.stopPropagation(); console.log('child'); }, render: function() { return <div> <p onClick={this.handleParentClick}> <span onClick={this.handleChildClick}>Click</span> </p> </div>; } }); ReactDOM.render(<App />, document.getElementById('root')); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"></div>