Css 可单击整个div，但不能单击它'；s子元素

我很难让整个div都可以点击，但不能点击它的子元素（尽管它们应该像平常一样接收事件）

我是不是漏掉了什么明显的东西

HTML

CSS

---

您可以通过停止单击事件的传播来实现这一点，例如：

document.getElementById（“noTriggerHideElement”）.addEventListener（“单击”，函数（事件）{
//你想做什么
event.preventDefault（）；
}，假）

另一个例子：

更多资讯：

您还可以使用event.stopPropagation（）
 您可以通过停止单击事件的传播来实现这一点，例如：

document.getElementById（“noTriggerHideElement”）.addEventListener（“单击”，函数（事件）{
//你想做什么
event.preventDefault（）；
}，假）

另一个例子：

更多资讯：

您还可以使用event.stopPropagation（）
 尝试使用e.stopPropagation（）


$（文档）.ready（函数（）{
$（“#模态”）。单击（函数（e）{
e、 停止传播（）；
});
$（'#模态包装器'）。单击（函数（e）{
$（'#模态包装器'）.hide（）；
});
});尝试使用e.stopPropagation（）


$（文档）.ready（函数（）{
$（“#模态”）。单击（函数（e）{
e、 停止传播（）；
});
$（'#模态包装器'）。单击（函数（e）{
$（'#模态包装器'）.hide（）；
});
});
您可以添加一个保护，检查点击事件是否起源于
#modal wrapper


$（文档）.ready（函数（）{
$（'#模态包装器'）。单击（函数（e）{
如果（e.target.id==='modal wrapper'）{
$（'#模态包装器'）.hide（）；
}
});
});
正文{
背景：#9e9e；
}
#模态包装器{
位置：固定；
/*原地不动*/
z指数：899；
/*坐在上面*/
左：0；
排名：0；
宽度：100%；
/*全宽*/
身高：100%；
/*全高*/
溢出：自动；
/*如果需要，启用滚动*/
背景色：rgb（255、255、255）；
/*退色*/
/*背景色：rgba（0,37,81,0.15）；/*黑色w/不透明度*/
背景色：rgba（255、255、255、0.4）；
/*黑色w/不透明度*/
}
#模态{
边框：1px纯红；
宽度：990px；
z指数：999；
身高：97%；
边框：1px实心#D9DFDF；
顶部：12px；
位置：固定；
左：50%；
转化：translateX（-50%）；
背景色：#fff；
溢出：滚动；
-webkit盒阴影：2px2px5px0pxRGBA（2042042040.5）；
-moz盒阴影：2px2px5px0pxrgba（2042042040.5）；
盒影：2px2px5px0pxRGBA（2042042040.5）；
}
#模态内容{
z指数：1000；
位置：相对位置；
}

试验
您可以添加一个保护，检查点击事件是否起源于
#modal wrapper


$（文档）.ready（函数（）{
$（'#模态包装器'）。单击（函数（e）{
如果（e.target.id==='modal wrapper'）{
$（'#模态包装器'）.hide（）；
}
});
});
正文{
背景：#9e9e；
}
#模态包装器{
位置：固定；
/*原地不动*/
z指数：899；
/*坐在上面*/
左：0；
排名：0；
宽度：100%；
/*全宽*/
身高：100%；
/*全高*/
溢出：自动；
/*如果需要，启用滚动*/
背景色：rgb（255、255、255）；
/*退色*/
/*背景色：rgba（0,37,81,0.15）；/*黑色w/不透明度*/
背景色：rgba（255、255、255、0.4）；
/*黑色w/不透明度*/
}
#模态{
边框：1px纯红；
宽度：990px；
z指数：999；
身高：97%；
边框：1px实心#D9DFDF；
顶部：12px；
位置：固定；
左：50%；
转化：translateX（-50%）；
背景色：#fff；
溢出：滚动；
-webkit盒阴影：2px2px5px0pxRGBA（2042042040.5）；
-moz盒阴影：2px2px5px0pxrgba（2042042040.5）；
盒影：2px2px5px0pxRGBA（2042042040.5）；
}
#模态内容{
z指数：1000；
位置：相对位置；
}

试验
您可以通过以下方式检查：

if (e.originalEvent.target.id == 'modal-wrapper') $('#modal-wrapper').hide();

工作实例

但它并不是在所有浏览器中都能工作，我认为有一个更好的属性。
您可以通过以下方式检查：

if (e.originalEvent.target.id == 'modal-wrapper') $('#modal-wrapper').hide();

工作实例

但它并不是在所有浏览器中都能工作，我认为它有一个更好的属性。
-您可以使用当前目标来确保它是包装器元素：

$("#modal-wrapper").click( function(e) {
    if(e.target == e.currentTarget) {
        alert('parent ele clicked');
    } else {
        //you could exclude this else block to have it do nothing within this listener
        alert('child ele clicked');
    }
});

-您可以检查div儿童事件并停止代理：

$("#modal-wrapper").click( function(e) {
    alert('parent ele clicked');
});
$("#modal-wrapper").children().click( function(e) {
    //this prevent the event from bubbling to any event higher than the direct children
    e.stopPropagation();
});

-您可以使用当前目标来确保它是包装器元素：

$("#modal-wrapper").click( function(e) {
    if(e.target == e.currentTarget) {
        alert('parent ele clicked');
    } else {
        //you could exclude this else block to have it do nothing within this listener
        alert('child ele clicked');
    }
});

-您可以检查div儿童事件并停止代理：

$("#modal-wrapper").click( function(e) {
    alert('parent ele clicked');
});
$("#modal-wrapper").children().click( function(e) {
    //this prevent the event from bubbling to any event higher than the direct children
    e.stopPropagation();
});

我猜你的意思是，如果点击事件来自
#modal content
，你不想触发隐藏模式？是的，没错。我猜你的意思是，如果点击事件来自
#modal content
，你不想触发隐藏模式？是的，没错。