<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 5 年前。
标签 javascript html css angular
<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 5 年前。
当我点击(在 mac 触摸板上)[页面][1] 上的下拉列表(第二个列表)元素时，我可以选择该元素。
当我用鼠标单击或单击触摸板时，无法选择元素。
我做错了什么？可能是我的 CSS 问题？
如果我将 (click) 更改为 (mousedown)，它会起作用。事件传播在这里如何工作？谢谢
这是 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>
最佳答案
查看您的 drop-down-list.component.html，您的下拉元素上有一个 blur 事件。这会导致您的列表在您的鼠标单击事件在列表上被触发之前关闭(删除该事件作为测试解决问题)。由于竞争条件，它会不一致地发生。
解决此问题的最简单(也是最笨拙)的方法是为您的 listBlur 方法添加一个超时时间，让点击事件有时间触发。
解决此问题的最佳方法是，如果鼠标光标位于下拉列表内部/上方，则不关闭模糊列表。然后点击事件应该关闭列表本身。
关于javascript - 当我点击一个绝对定位和更高的 z-index <li> 元素时，mousedown 事件被触发但没有点击事件 - 可能是 CSS？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48940300/