React下拉菜单展开时后续链接onClick事件未触发问题求助

算力阿峰

2026-5-14

Hey there! Let's dig into why your link's onClick event isn't firing when the dropdown menu is expanded—this is a super common issue, and we can fix it with a few targeted checks:

The dropdown is covering your link (z-index conflict)
Most likely, the expanded dropdown has a higher z-index value than your link, acting like a blocking layer on top. When you click, the dropdown catches the event instead of letting it reach the link below.
Fix: Adjust the z-index of your link's container to be higher than the dropdown's. Just make sure both elements have a defined position (like relative, absolute, or fixed) for z-index to take effect:
```
/* Dropdown menu style */
.dropdown {
  position: absolute;
  z-index: 50;
}

/* Link's parent container */
.link-wrapper {
  position: relative;
  z-index: 100; /* Higher than the dropdown's z-index */
}
```
Event propagation is being blocked
Check if any event handlers on the dropdown are using event.stopPropagation() or event.preventDefault(). These methods can stop the click event from bubbling up to the link if the dropdown overlaps with it.
Fix: If you don't need to block propagation for dropdown functionality, remove those lines. If you do need them, rearrange your layout so the dropdown doesn't overlap the link at all.
Pointer events are intercepting clicks
If the dropdown's background or non-interactive areas are set to pointer-events: auto, they'll catch clicks even in empty space.
Fix: Set pointer-events: none on the dropdown's container, then override it to pointer-events: auto only on the actual clickable menu items. This lets clicks on the dropdown's empty areas pass through to the link below:
```
.dropdown-container {
  pointer-events: none;
}

.dropdown-item {
  pointer-events: auto;
}
```