超链接怎么正确调用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>

解决方法探讨:

复制代码 代码如下:
<a onclick="javascript:Foo();">链接</a>

此时不影响动画显示,但鼠标移上去后,鼠标及超链接样式不发生变化,虽然可以利用样式表来改变鼠标及超链接样式,但毕竟有些繁琐,况且这种思路也不好。

再考查如下代码:

复制代码 代码如下:
<a onclick="javascript:Foo();" href="#">链接</a>

我们可以发现,虽然点击链接后不影响动画显示,但页面总是滚到最上面,这种效果也不是我们想要的。

最终解决方法:

复制代码 代码如下:
<a onclick="javascript:Foo();return false;" href="#">不影响 GIF 的链接</a>

如果不考虑GIF图片的问题,以上方法均可。

相关文章

  • JavaScript实现文字与图片拖拽效果的方法

    JavaScript实现文字与图片拖拽效果的方法

    这篇文章主要介绍了JavaScript实现文字与图片拖拽效果的方法,涉及javascript操作文字与图片的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • 基于JS实现二维码名片生成的示例代码

    基于JS实现二维码名片生成的示例代码

    这篇文章主要为大家详细介绍了如何利用JavaScript实现生成二维码名片的功能,文中的示例代码简洁易懂,感兴趣的小伙伴可以动手尝试一下
    2022-06-06
  • 解决layer.open后laydate失效的问题

    解决layer.open后laydate失效的问题

    今天小编就为大家分享一篇解决layer.open后laydate失效的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 比较全的JS checkbox全选、取消全选、删除功能代码

    比较全的JS checkbox全选、取消全选、删除功能代码

    今天把JS控制checkbox全选、取消全选、删除功能的代码贴出来。。
    2008-12-12
  • 基于JS实现禁止查看源码及获取键盘的按键值

    基于JS实现禁止查看源码及获取键盘的按键值

    这篇文章主要介绍了基于JS实现禁止查看源码及获取键盘的按键值,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-02-02
  • GoJs中导出图片或者SVG实现示例详解

    GoJs中导出图片或者SVG实现示例详解

    这篇文章主要为大家介绍了GoJs中导出图片或者SVG实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • JavaScript中丢失精度的问题及避免方法

    JavaScript中丢失精度的问题及避免方法

    JavaScript 是一门动态类型的脚本语言,用于在浏览器中创建交互式的网页,然而,由于其使用 IEEE 754 浮点数表示数字,可能会导致丢失精度的问题,本文将探讨 JavaScript 中的丢失精度问题,以及如何避免这些问题,需要的朋友可以参考下
    2023-11-11
  • JS设计模式之建造者模式的使用方法详解

    JS设计模式之建造者模式的使用方法详解

    JS建造者模式是一种创建型设计模式,它可以用于构建复杂对象的创建过程,将对象的构建步骤和表示分离,以便能够灵活地构建不同的对象,本文将通过代码示例给大家详细的介绍一下JS建造者模式的用法,需要的朋友可以参考下
    2023-08-08
  • Javascript中常见的逻辑题和解决方法

    Javascript中常见的逻辑题和解决方法

    今天遇到了一些题,比较有意思和轻巧,而且加强运用一下了js原生语法,现在小编总结好后分享给大家,有需要的朋友们可以参考借鉴,下面来一起看看吧。
    2016-09-09
  • JS比较两个数值的大小实例

    JS比较两个数值的大小实例

    下面小编就为大家带来一篇JS比较两个数值的大小实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11

最新评论