Javascript 如何使除深层子div之外的整个div都可单击？

我想让整个div都可以点击，除了一个子div。这个子div不是div的直接子级，而是更深一层。我想通过只传递div id或类名来动态排除这个子div

我试着用jQuery“.not（）”和“.children（）”方法来解决这个问题，这很有效。但从某种意义上讲，它是静态的，我需要知道div在哪个级别，并且需要相应地调整方法。但是，我想要一些动态的东西，它将只接受div的类名或id，并从DOM树中找到它，并将其从新的DOM对象链中排除，以便jQuery“.click”和“.hover”函数可以应用于除特定div之外的整个div

我已经为我的问题创建了一个虚拟示例。在本例中，我希望使整个div（即id=main1）超链接，但“#d3”div除外

这是我的JSFIDLE：

示例代码： HTML:

无标题文件

主要


d1


d2


d3

d4
d5

CSS:

.border{
边框：5px实心玫瑰色；
}
.薄边{
边框：2个实心RosyBrown；
}
.divmain 1{
宽度：90%；
边距：0自动0自动；
溢出：隐藏；
}
.divd1{
宽度：30%；
浮动：左；
}
.divd2{
宽度：60%；
浮动：对；
利润率：03.5%；
}
.第3分部{
保证金：自动；
宽度：90%；
}
.第4分部{
宽度：30%；
}
.divd5{
宽度：30%；
}

jQuery:

---

有谁能帮助我如何使整个div可单击并动态排除子div吗？

在jQuery中，您可以运行

event.stopPropagation();

---

在div子项的单击事件中，您不希望触发初始函数。

使用

cancelBubble

例如，要禁用“#d5”div上的根事件

$（'d5'）。在（'click'，函数（e）{
//阻止事件冒泡。
e、 取消气泡=真
});

我不太喜欢jQuery，但我可以告诉你，这可以通过纯JavaScript实现。您所要做的就是实现顶级div的事件侦听器，并查看单击的元素或其父元素是否具有目标类

让我们以这个HTML标记为例，当有人单击divd4 else中的任何内容时，我们将触发一个警报“目标锁定”“常规操作”

函数HasSelfClassOrParent（元素，类名）{
if（element.classList&&element.classList.contains（classname））
返回true；
返回element.parentNode&&HasSelfClassOrParent（element.parentNode，classname）；
}
设divd2=document.querySelector（“.divd2”）
让目标='divd4'
divd2.addEventListener（“单击”），函数（事件）{
让isTargetOrChild=HasSelfClassOrParent（event.target，target）
如果（isTargetOrChild）{
警报（“目标锁定”）
}否则{
警报（“一般行动”）
}
})

.border{
边框：5px实心玫瑰色；
}
.薄边{
边框：2个实心RosyBrown；
填充：20px；
边际下限：10px
}
.第4分部{
背景：64B448；
颜色：#fff；
光标：指针；
}

点击div four，看看会发生什么

我是二组

我是第三组

我是第四册里的一个简单段落

我是第四册的另一段

我是第五组

这里的关键是传递

事件

对象，以便您可以检查实际接收

单击的元素是什么

由于
#d3
既包含
#d4
又包含
#d5
，我假设您也不希望这些元素触发

如果是这种情况，您可以使用检查元素是否是目标元素的后代

contains（）方法返回一个布尔值，指示
节点是给定节点的后代，即节点本身，其中一个
其直接子女，[……]

如果您只想阻止元素
#d3
本身的操作，则不需要
d3.contains
，只要
If（e.target！=d3）
就可以了


//查找元素
var main1=$（“#main1”）
var d3=$（“#d3”）.get（0）//获取HTMLElement
//句柄单击并悬停指针
main1.打开（“单击”，功能（e）{
如果（！d3.包含（如目标））{
log（“我将打开一个窗口”）；
}否则{
log（“我是”+e.target.id+“并且不会打开窗口”）
}
});
main1.悬停（函数（）{
$（this.css（“游标”、“指针”）；
});
.border{
边框：5px实心玫瑰色；
}
.薄边{
边框：2个实心RosyBrown；
}
.divmain 1{
宽度：90%；
边距：0自动0自动；
溢出：隐藏；
}
.divd1{
宽度：30%；
浮动：左；
}
.divd2{
宽度：60%；
浮动：对；
利润率：03.5%；
}
.第3分部{
保证金：自动；
宽度：90%；
}
.第4分部{
宽度：30%；
}
.divd5{
宽度：30%；
}


主要

d1

d2

d3

d4
d5
感谢@msg的精彩回答；它解决了我的主要问题。你的假设是对的。因为#d4和#d5在#d3内，所以我也想排除它们。现在我想在
悬停
的情况下实现同样的效果。在我的例子中，内部的#d4和#d5可能是不同的按钮，因此情况更加复杂。我现在希望光标在#main1 div中作为“指针指针指针”，除了#d3（但由于内部的#d4和#d5是按钮，
event.stopPropagation();