使用 React Hooks 时如何防止事件在嵌套的 div 中起作用
[英]How to prevent events from acting in nested divs when using React Hooks
问题描述
I have nested div elements.
我有嵌套的 div 元素。 Outside there should be events to move and to click.外面应该有移动和点击的事件。 I want to enable a nested element to act as a button and to prevent the event from outside to act.我想让嵌套元素充当按钮并防止外部事件发生。 In the example when we click on the red part, both events are happening.在示例中，当我们单击红色部分时，两个事件都在发生。 How can I stop the event from the green part when we click on the red part?当我们点击红色部分时，如何从绿色部分停止事件？ stopPropagation() did not do the job. stopPropagation() 没有完成这项工作。 I am using React and my structure is more complex than in the example.我正在使用 React，我的结构比示例中更复杂。 But I wanted to reduce for reasons of clarity.但为了清楚起见，我想减少。
I would be happy if someone can help.如果有人可以提供帮助，我会很高兴。
#bigCircle { display: flex; justify-content: center; align-items: center; width: 180px; height: 180px; border-radius: 50%; background-color: green; } #smallCircle { width: 40px; height: 40px; border-radius: 50%; background-color: red; }
<!DOCTYPE html> <html lang="en"> <head> </head> <body> <div id="bigCircle"> <div id="smallCircle"></div> </div> <script> document.getElementById("bigCircle").addEventListener("click",myBigCircle); document.getElementById("smallCircle").addEventListener("click",mySmallCircle); function myBigCircle(){ console.log("Hello");} function mySmallCircle(){ console.log("Bye");} </script> </body> </html>
I think it is related to React Hooks.我认为这与 React Hooks 有关。 Here you see the example with stopPropagation not working:在这里您可以看到 stopPropagation 不起作用的示例：
import React, { useState } from 'react';
function Test() {
let [test, setTest] = useState(false);
return (
<div id="wrapper"
style={styleBigCircle}
onMouseUp={() => {
setTest(false);
console.log("Hello", test)
}
}>
<div id="center"
style={styleSmallCircle}
onClick={(e) => {
e.stopPropagation();
setTest(!test);
console.log("Bye", test)
}}
>
</div>
</div>
);
}
const styleBigCircle = {
display: "flex",
justifyContent: "center",
alignItems: "center",
width: "180px",
height: "180px",
borderRadius: "50%",
backgroundColor: "green"
}
const styleSmallCircle = {
width: "40px",
height: "40px",
borderRadius: "50%",
backgroundColor: "red"
}
export default Test;
I would be happy if someone knows how to fix this.如果有人知道如何解决这个问题，我会很高兴。
2 个解决方案
解决方案1
1 2020-02-19 10:28:33
Use event.stopPropagation() to prevent parent trigger.使用event.stopPropagation()来防止父触发器。
#bigCircle { display: flex; justify-content: center; align-items: center; width: 180px; height: 180px; border-radius: 50%; background-color: green; } #smallCircle { width: 40px; height: 40px; border-radius: 50%; background-color: red; }
<!DOCTYPE html> <html lang="en"> <head> </head> <body> <div id="bigCircle"> <div id="smallCircle"></div> </div> <script> document.getElementById("bigCircle").addEventListener("click",myBigCircle); document.getElementById("smallCircle").addEventListener("click",mySmallCircle); function myBigCircle(){ console.log("Hello");} function mySmallCircle(event){ event.stopPropagation() console.log("Bye"); } </script> </body> </html>
解决方案2
1 已采纳 2020-02-19 12:30:21
You are dealing with different events, so to prevent the child element from trigger the parent you would need to add the same event and stopPropagation() on that one instead:您正在处理不同的事件，因此为了防止子元素触发父元素，您需要在该事件上添加相同的事件和stopPropagation() ：
<div
id="center"
style={styleSmallCircle}
onMouseUp={e => {
e.stopPropagation();
}}
onClick={e => {
setTest(!test);
console.log("Bye");
}}
/>
Here is a fully working example:这是一个完全有效的示例：
const Test = () => { let [test, setTest] = React.useState(false); return ( <div id="wrapper" style={styleBigCircle} onMouseUp={() => { console.log("Hello"); }} > <div id="center" style={styleSmallCircle} onMouseUp={e => { e.stopPropagation(); }} onClick={e => { console.log("Bye"); }} /> </div> ); }; const styleBigCircle = { display: "flex", justifyContent: "center", alignItems: "center", width: "180px", height: "180px", borderRadius: "50%", backgroundColor: "green" }; const styleSmallCircle = { width: "40px", height: "40px", borderRadius: "50%", backgroundColor: "red" }; const rootElement = document.getElementById("root"); ReactDOM.render(<Test />, rootElement);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script> <div id="root"></div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.