超链接怎么正确调用javascript函数


Posted in Javascript onMay 23, 2016

点击超链接调用 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 相关文章推荐
基于jquery的一个简单的脚本验证插件
Apr 05 Javascript
VBS通过WMI监视注册表变动的代码
Oct 27 Javascript
如何用ajax来创建一个XMLHttpRequest对象
Dec 10 Javascript
简单谈谈javascript代码复用模式
Jan 28 Javascript
jquery实现的动态回到顶部特效代码
Oct 28 Javascript
AngularJS页面访问时出现页面闪烁问题的解决
Mar 06 Javascript
jQuery遍历DOM元素与节点方法详解
Apr 14 Javascript
Javascript字符串常用方法详解
Jul 21 Javascript
JavaScript SHA512加密算法详细代码
Oct 06 Javascript
vue如何进行动画的封装
Sep 26 Javascript
layui 实现table翻页滚动条位置保持不变的例子
Sep 05 Javascript
小程序实现左滑删除的效果的实例代码
Oct 19 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
May 23 #Javascript
jQuery中选择器的基础使用教程
May 23 #Javascript
基于BootStrap的图片轮播效果展示实例代码
May 23 #Javascript
AngularJS上拉加载问题解决方法
May 23 #Javascript
在IE8上JS实现combobox支持拼音检索功能
May 23 #Javascript
浅析JavaScript 箭头函数 generator Date JSON
May 23 #Javascript
用js实现放大镜的效果的简单实例
May 23 #Javascript
You might like
php站内搜索并高亮显示关键字的实现代码
2011/12/29 PHP
php实现的操作excel类详解
2016/01/15 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
Laravel框架路由管理简单示例
2019/05/07 PHP
PHP实现简单用户登录界面
2019/10/23 PHP
多个iframe自动调整大小的问题
2006/09/18 Javascript
jquery.simple.tree插件 更简单,兼容性更好的无限树插件
2010/09/03 Javascript
Jquery下判断Id是否存在的代码
2011/01/06 Javascript
如何让div span等元素能响应键盘事件操作指南
2012/11/13 Javascript
javascript数组遍历for与for in区别详解
2014/12/04 Javascript
JQuery设置时间段下拉选择实例
2014/12/30 Javascript
JavaScript调用客户端Java程序的方法
2015/07/27 Javascript
JavaScript中的this关键字使用详解
2015/08/14 Javascript
jQuery实现美观的多级动画效果菜单代码
2015/09/06 Javascript
详解Vue使用 vue-cli 搭建项目
2017/04/20 Javascript
实例分析Array.from(arr)与[...arr]到底有何不同
2019/04/09 Javascript
浅析vue-router实现原理及两种模式
2020/02/11 Javascript
Javascript实现贪吃蛇小游戏(含详细注释)
2020/10/23 Javascript
python生成不重复随机数和对list乱序的解决方法
2018/04/09 Python
如何优雅地处理Django中的favicon.ico图标详解
2018/07/05 Python
Python 中的 import 机制之实现远程导入模块
2019/10/29 Python
Python Django搭建网站流程图解
2020/06/13 Python
用python爬虫批量下载pdf的实现
2020/12/01 Python
浅谈amaze-ui中datepicker和datetimepicker注意的几点
2020/08/21 HTML / CSS
肯尼亚网上商城:Kilimall
2016/08/20 全球购物
YSL圣罗兰美妆美国官网:Yves Saint Lauret US
2016/11/21 全球购物
什么是设计模式
2012/06/17 面试题
大学生村官心得体会范文
2014/01/04 职场文书
竞选学生会主席演讲稿
2014/04/24 职场文书
涉及车辆房产分割的离婚协议书范文
2014/10/12 职场文书
2014年家长学校工作总结
2014/11/20 职场文书
2016校本研修培训心得体会
2016/01/08 职场文书
2019脱贫攻坚工作总结报告范本!
2019/08/06 职场文书
浅谈redis五大数据结构和使用场景
2021/04/12 Redis
Tomcat用户管理的优化配置详解
2022/03/31 Servers
什么是clearfix (一文搞清楚css清除浮动clearfix)
2023/05/21 HTML / CSS