超链接怎么正确调用javascript函数
更新时间：2016年05月23日 15:24:47 作者：秦风
本文介绍使用超链接调用javasript函数且不会影响GIF图片动画的方法，有遇到相同问题的小伙伴可以参考一下。
点击超链接调用 JavaScript 函数，一般人都用：
复制代码 代码如下:
<a href="javascript:function();">
但这有个缺点，就是点击链接后，页面上的GIF动画将静止。
试看如下代码：
复制代码 代码如下:
<script type="text/javascript">
<!--
function Foo()
{
//do something
}
//-->
</script>
<img src="logo.gif" alt="GIF 动画" />
<a href="javascript:Foo();">使 GIF 动画静止的链接</a>
<!--
function Foo()
{
//do something
}
//-->
</script>
<img src="logo.gif" alt="GIF 动画" />
<a href="javascript:Foo();">使 GIF 动画静止的链接</a>
解决方法探讨：
复制代码 代码如下:
<a onclick="javascript:Foo();">链接</a>
此时不影响动画显示，但鼠标移上去后，鼠标及超链接样式不发生变化，虽然可以利用样式表来改变鼠标及超链接样式，但毕竟有些繁琐，况且这种思路也不好。
再考查如下代码：
复制代码 代码如下:
<a onclick="javascript:Foo();" href="#">链接</a>
我们可以发现，虽然点击链接后不影响动画显示，但页面总是滚到最上面，这种效果也不是我们想要的。
最终解决方法：
复制代码 代码如下:
<a onclick="javascript:Foo();return false;" href="#">不影响 GIF 的链接</a>
如果不考虑GIF图片的问题，以上方法均可。
您可能感兴趣的文章:
相关文章
JavaScript是一门强大而灵活的编程语言，TypeScript作为JavaScript的超集，为开发人员提供了静态类型检查、更好的协作能力和面向对象编程的支持，本文将详细讲解如何将JavaScript代码转换为TypeScript，并写一些代码示例参考2023-06-06
今天小编就为大家分享一篇layer弹出层取消遮罩的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要为大家详细介绍了微信小程序实现圆心进度条，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-06-06
下面小编就为大家带来一篇JavaScript继承学习笔记。小编觉得挺不错的，现在分享给大家，也给大家做个参考2016-05-05
JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序
这篇文章主要介绍了JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序,需要的朋友可以参考下2017-01-01
这篇文章主要介绍了JS模拟实现哈希表及应用,结合实例形式分析了javascript模拟实现哈希表的步骤、相关操作技巧与使用方法,需要的朋友可以参考下2018-05-05
基于JavaScript实现HarmonyOS备忘录服务卡片
这篇文章主要介绍了基于JavaScript实现HarmonyOS备忘录服务卡片，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-05-05
这篇文章主要介绍了JS实现的倒计时效果,列举了两则JavaScript倒计时效果代码供大家参考,原理基本相似,代码简洁实用,需要的朋友可以参考下2015-12-12
这篇文章主要为大家介绍了iframe实现高度自适应小程序web-view方案详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
AJAX 是一种用于创建快速动态网页的技术,下面这篇文章主要给大家介绍了关于原生Ajax与JQuery Ajax的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-03-03
最新评论