各位小伙伴,我有点费解,决定请教各位...
我有以下 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 ..(但我不知道它是否可行) 谢谢 问候
最佳答案
当您单击 div
时,单击事件会通过 a
冒泡到 li
。因此,如果您将监听器添加到 li
而不是 div,那么一切都应该有效。
当然,如果您的 div
的点击处理程序调用 event.stopPropagation
,那么您的 li
的处理程序将无法工作。与 a
元素上的点击处理程序相同。
关于javascript - HTML CSS- javascript .click() 事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20479244/