javascript - 为什么鼠标指针变为箭头而不触发图标上的单击事件？

Question

我在我的 MVC Core 应用程序中使用了一个图标。当我将鼠标悬停在图标上时，它应该显示工具提示并让我触发点击事件。我将css属性光标设置为“指针”。

就我而言，当我将鼠标悬停在图标上时，光标会不断地从指针快速变为箭头。当它变成箭头时，我无法触发点击事件。

我完全糊涂了。

<i class='fa fa-plus-square fa-lg displaytooltip' id='idAdd'  title='' style = 'cursor:pointer;color:orange' onclick=Add();></i >

样本视频

标签： javascriptcssasp.net-corecursor

Answer 1

其实只要不禁用元素的点击事件并onclick详细添加事件，不管你的鼠标悬停在什么状态，仍然可以触发点击事件。

前提是你必须保证你在click on the element itself，而不是别处。

 @{
    ViewData["Title"] = "Index";
    Layout = null;
}   
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script>  
    function Add() {
        alert("clicked!");
    }
</script>
<i class='fa fa-plus-square fa-lg displaytooltip' id='idAdd' title='click me'
   style='cursor:pointer;color:orange' onclick=Add();>
</i>

这是测试结果：