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

【问题标题】：Why mouse pointer is changing to arrow and not triggering click event over the icon?为什么鼠标指针变为箭头而不触发图标上的单击事件？
【发布时间】：2020-09-14 16:24:46
【问题描述】：

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

在我的例子中，当我将鼠标悬停在图标上时，光标会不断地从指针快速变为箭头。因为它变成了一个箭头，所以我无法触发点击事件。

我完全糊涂了。

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

SampleVideo

【问题讨论】：

标签： javascript css asp.net-core cursor

【解决方案1】：

你需要在""或者''中调用一个函数引用mark

    <button onclick="myFunction()">Click me</button>

你没有在 "" 或 '' 引号中添加函数，这也是为什么它不起作用

关闭函数不需要添加分号(;)

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

function Add(){
alert("call add function");
}

&lt;i class='fa fa-plus-square fa-lg displaytooltip' id='idAdd'  title='' style = 'cursor:pointer;color:orange' onclick="Add()"&gt;YOUR ICON &lt;/i &gt;

【讨论】：

嗨@shakil，实际上，点击事件有时会起作用。我无法预测错误的发生。当我将鼠标悬停在标记上时，光标指针不断地从指针切换到箭头和箭头切换到指针。如果它在箭头中，我无法单击该图标。我通过在本地运行代码进行了测试，它工作正常。如果我在 IIS 中部署，那么我将面临这个问题。

【解决方案2】：

其实只要不禁用元素的点击事件，详细添加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>

这是测试结果：

【讨论】：

非常感谢@Yongqing You，但我的问题略有不同。我在我的问题中附上了一个示例视频。请查看该视频，您将清楚地了解我的要求。
@YuvarajT，视频确实有问题，请提供更多相关代码供我们参考。