JS与HTML关联异常：图片点击失效及链接悬停提示隐藏问题排查

问题场景 #

需要实现鼠标悬停图片时隐藏浏览器左下角的链接信息，但添加脚本后图片变为不可点击状态。

核心问题 #

1. 误用了Angular框架的(click)绑定语法，当前是纯HTML/JS环境，不支持该语法，导致点击事件无法触发。
2. JS代码使用了TypeScript的类型标注（url: string），普通JS运行环境会识别为语法错误，导致openUrl函数无法正常定义。
3. <a>标签未设置有效href属性，既无法触发默认跳转，也无法通过原生方式隐藏链接信息。

修复步骤 #

1. 修正JS代码 #

将TypeScript风格的函数改为标准JS写法，确保函数全局可访问：

function openUrl(url) {
  window.open(url, '_blank');
}

2. 修改HTML代码 #

替换Angular风格的点击绑定为原生onclick事件，同时通过javascript:void(0)避免浏览器显示链接信息：

<div class="image_wrap">
  <a href="javascript:void(0)" onclick="openUrl('https://github.com/dankYoff')">
    <img src="github.svg" width="50">
  </a>
</div>

或者直接移除<a>标签，给图片添加点击事件（需加鼠标指针样式提示可点击）：

<div class="image_wrap">
  <img 
    src="github.svg" 
    width="50" 
    onclick="openUrl('https://github.com/dankYoff')"
    style="cursor: pointer;"
  >
</div>

原理说明 #

• javascript:void(0)作为<a>的href值，会阻止浏览器默认跳转行为，同时不会在左下角显示目标链接。
• 原生onclick事件在纯JS环境中可直接调用全局函数，避免框架语法不兼容问题。
• 标准JS函数定义确保代码能在普通浏览器环境中正常解析执行。

内容的提问来源于stack exchange，提问作者Vova Snopyk