当我单击绝对定位且 z 索引较高的 <li> 项时，将触发 mousedown 事件，但不会触发 click 事件 - 可能是 CSS？

Question

当我点击（在 Mac 触摸板上）[页面][1] 上的下拉列表（第二个列表）项目时，我可以选择该项目。
当我单击鼠标或单击触摸板时，我无法选择该项目。我做错了什么？可能是我的CSS问题？
如果我将（单击）更改为（鼠标按下），它就会起作用。这里的事件传播是如何进行的？谢谢

这是 html 片段。

 <div role='Listbox' (keyup)='handleKeyUpEvent($event)' (keydown)='handleKeyDownEvent($event)'>
   <span tabIndex='1' (blur)='listBlur()' (click)='listActivated()'
    (click)='toggleDropDownList()'
    [ngClass]='titleClasses'>{{title || 'DropDownList'}}</span>
     <ul role='List' [ngClass]='listClasses'>
       <li
         role='Listitem'
         (mousedown)='selectItem(item)'
         *ngFor='let item of listItems; let i = index'
         [class.selected]='i === activeIndex'
         [selected]='i === activeIndex'>{{i + 1}}: {{item.data}}
       </li>
     </ul>
   <span [ngClass]='clearClasses' (click)='deselectItem()'>Clear</span>
 </div>

Answer 1

查看您的，您的下拉元素上drop-down-list.component.html有一个事件。blur这会导致列表在鼠标单击事件在列表上触发之前关闭（作为测试解决问题时删除该事件）。由于竞争条件，它不一致地发生。

解决此问题的最简单（也是最笨拙）的方法是在方法中添加超时，listBlur以便为单击事件提供触发时间。

解决此问题的最佳方法是，如果鼠标光标位于下拉列表内部/上方，则不要关闭模糊列表。然后单击事件应该自行关闭列表。