javascript - HTML CSS- javascript .click() 事件

Question

各位小伙伴，我有点费解，决定请教各位...

我有以下 HTML 结构(或多或少):

<li>
  <a>
    <div></div>
    <div></div>
    <div></div>
  </a>
</li>

div设置为inline-blocks，anchor设置为block列表元素有一个 css 悬停类和一个事件/点击模式类。悬停样式适用于 li.hover: hover 但单击的类对我不起作用，因为单击事件触发的是子处理程序(div)而不是列表..

所以我的问题是，如何将父元素设置为可点击元素而不是子元素。如果您能阐明为什么它与悬停事件不同(为什么父元素的悬停事件处理程序是触发，而不是 children 的，比如点击 )，那将是非常棒的，因为我想完全理解 css 和事件是如何工作的。

编辑-

我有一个 jquery 事件处理程序 ..

$(".mylist").click(function(e){
$(this).addClass('selected');

});

问题是这不会触发，因为当我单击时，div 似乎“重叠”了父项。也不想使用 z-index ..(但我不知道它是否可行)谢谢问候

Answer 1

当您单击 div 时，单击事件会通过 a 冒泡到 li。因此，如果您将监听器添加到 li 而不是 div，那么一切都应该有效。

当然，如果您的 div 的点击处理程序调用 event.stopPropagation，那么您的 li 的处理程序将无法工作。与 a 元素上的点击处理程序相同。