Javascript 仅当事件位于具有特定类的dom元素之外时才触发该事件

我有一个监听点击的事件监听器。如果这些单击在给定的dom元素之外，则会调用某个函数（在本例中为

handleClick

）

现在，只有当事件目标不是具有

this.setWrapper

ref的目标时，才会调用函数

handleClick

我想知道如果我碰巧也单击了

.boxTwo

，如何防止调用

handleClick

注意，我不想通过向

.boxTwo

的div添加ref来实现这一点，而是通过查询DOM来识别类名为“boxTwo”的div内部发生的任何单击。谢谢

类应用程序扩展了React.Component{
构造函数（）{
超级（）；
this.state={onClick:false}；
this.setWrapperRef=this.setWrapperRef.bind（this）；
this.handleClick=this.handleClick.bind（this）；
}
componentDidMount（）{
document.addEventListener（'mousedown'，this.handleClick）；
}
组件将卸载（）{
document.removeEventListener（'mousedown'，this.handleClick）；
}
setWrapperRef（节点）{
this.wrapperRef=节点；
}
handleClick（事件）{
if（this.wrapperRef&&！this.wrapperRef.contains（event.target））{
this.setState（{onClick:！this.state.onClick}）；
}
}
render（）{
返回(
{this.state.onClick？“开”：“关”}
);
}
}
ReactDOM.render（，document.getElementById（'app'））
.boxOne{
高度：100px；
宽度：100px；
背景：粉红色；
}
B.第二箱{
利润率：30像素；
高度：50px；
宽度：70px；
边框：纯黑2px；
背景：橙色；
}


您只需要检查
event.target.className
是否不等于
boxTwo
，如下面的代码段所示
如果目标具有
boxOne
类，则可以使用相同的“技术”来防止调用函数
如果您想在没有类名的所有情况下触发，您可以在条件语句中使用它：
！event.target.className

如果多加一点，为了可读性，我会这样做

handleClick（事件）{
//那些不会触发的
const disabledTriggers=['boxOne'，'boxTwo']；
//如果事件类列表中没有包含的类被禁用，则为Ok
const ok=！disabledTriggers.some（c=>event.target.classList&&event.target.classList.contains（c））
如果（确定）{
this.setState（{onClick:！this.state.onClick}）；
}
}

这是您的代码片段，其中包含了解决方案和最少的修改


类应用程序扩展了React.Component{
构造函数（）{
超级（）；
this.state={onClick:false}；
this.setWrapperRef=this.setWrapperRef.bind（this）；
this.handleClick=this.handleClick.bind（this）；
}
componentDidMount（）{
document.addEventListener（'mousedown'，this.handleClick）；
}
组件将卸载（）{
document.removeEventListener（'mousedown'，this.handleClick）；
}
setWrapperRef（节点）{
this.wrapperRef=节点；
}
handleClick（事件）{
if（event.target.className！='boxTwo'&&this.wrapperRef&&this.wrapperRef.contains（event.target））{
this.setState（{onClick:！this.state.onClick}）；
}
}
render（）{
返回(
{this.state.onClick？“开”：“关”}
);
}
}
ReactDOM.render（，document.getElementById（'app'））
.boxOne{
高度：100px；
宽度：100px；
背景：粉红色；
}
B.第二箱{
利润率：30像素；
高度：50px；
宽度：70px；
边框：纯黑2px；
背景：橙色；
}
让我解释一下我做了什么

添加了一个状态来维护其上的元素的类
我们不想有onclick
在boxOne类中添加了一个以上的容器类，以检查即使我们有多个类，这是否成立
我必须检查
event.target.classList
（它返回当前目标拥有的类的列表），并检查classList中的任何人是否存在到状态wrapperRefs
如果不存在，则在组件外部单击。我希望如此
帮助你

如果您有任何疑问，请在下面进行评论。我愿意尽我所能帮助你


类应用程序扩展了React.Component{
构造函数（）{
超级（）；
this.state={onClick:false，wrapperRefs:['boxOne'，'boxTwo']}；
this.handleClick=this.handleClick.bind（this）；
}
componentDidMount（）{
document.addEventListener（'mousedown'，this.handleClick）；
}
组件将卸载（）{
document.removeEventListener（'mousedown'，this.handleClick）；
}
handleClick（事件）{
const classes=event.target.classList；
const exists=this.state.wrapperRefs.some（ref=>classes.contains（ref））；
如果（！存在）{
this.setState（{onClick:！this.state.onClick}）；
}
}
render（）{
返回(
{this.state.onClick？“开”：“关”}
);
}
}
ReactDOM.render（，document.getElementById（'app'））
.boxOne{
高度：100px；
宽度：100px；
背景：粉红色；
}
B.第二箱{
利润率：30像素；
高度：50px；
宽度：70px；
边框：纯黑2px；
背景：橙色；
}