如何在div的某些地方不触发onclick？

Question

我想在您单击 div 而不是 div 的外部时触发 onclick。具体div?

中点击时如何让onclick功能不被触发

    import React from "react"
    import { Container, Backdrop, Card } from "./styles"

    export default function FocusSneakerCard(props){
        function click(){
            props.setModal(false)
            props.setData({})
        }

        return(
            <Container>
                <Backdrop onClick={() => click()}>
                    <Card>
                        
                    </Card>
                </Backdrop>
            </Container>
        )
    }

PS 我正在使用样式组件。

Answer 1

我发现了一个叫做 event.stopPropagation() 的东西，它“防止当前事件在捕获和冒泡阶段进一步传播”。您可以像这样在子元素的 onClick 事件中包含 event.stopPropagation：

  const parentClick = () => {
    alert("clicked");
  };

  const childClick = (e) => {
    e.stopPropagation();
  };

  return (
    <div className="outer" onClick={parentClick}>
      <div className="inner" onClick={childClick}>
        Cant Click
      </div>
    </div>
  );
}

https://codesandbox.io/s/laughing-dubinsky-zw013?file=/src/App.js:101-382

注意：“但是，它不会阻止任何默认行为的发生；例如，仍然会处理对链接的点击。如果您想停止这些行为，请参阅 preventDefault() 方法。”来自 MDN

如何在div的某些地方不触发onclick？

how to not set off onclick in some parts of div?

html

javascript

onclick

reactjs

styled-components