超链接怎么正确调用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 相关文章推荐
YUI 读码日记之 YAHOO.lang.is*
Mar 22 Javascript
Javascript String.replace的妙用
Sep 08 Javascript
Javascript 面向对象 继承
May 13 Javascript
js中键盘事件实例简析
Jan 10 Javascript
javascript实现随机读取数组的方法
Aug 03 Javascript
基于jQuery Bar Indicator 插件实现进度条展示效果
Sep 30 Javascript
微信小程序调用PHP后台接口 解析纯html文本
Jun 13 Javascript
jquery.validate.js 多个相同name的处理方式
Jul 10 jQuery
Angular中sweetalert弹框的基本使用教程
Jul 22 Javascript
命令行批量截图Node脚本示例代码
Jan 25 Javascript
JS实现的冒泡排序,快速排序,插入排序算法示例
Mar 02 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
Aug 07 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 使用curl提交json格式数据
2013/06/29 PHP
PHP实现HTML页面静态化的方法
2015/11/04 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
Laravel 微信小程序后端实现用户登录的示例代码
2019/11/26 PHP
Hutia 的 JS 代码集
2006/10/24 Javascript
Cookie 注入是怎样产生的
2009/04/08 Javascript
javascript document.execCommand() 常用解析
2009/12/14 Javascript
js返回上一页并刷新代码整理
2012/12/21 Javascript
JS 精确统计网站访问量的实例代码
2013/07/05 Javascript
jquery统计输入文字的个数并对其进行判断
2014/01/07 Javascript
JS实现光滑展开合拢的菜单效果代码
2015/09/16 Javascript
初步使用Node连接Mysql数据库
2016/03/03 Javascript
AngularJS动态生成div的ID源码解析
2016/08/29 Javascript
jquery获取select,option所有的value和text的实例
2017/03/06 Javascript
微信小程序request请求后台接口php的实例详解
2017/09/20 Javascript
在Vue项目中引入腾讯验证码服务的教程
2018/04/03 Javascript
微信小程序实现跑马灯效果完整代码(附效果图)
2018/05/30 Javascript
详解使用 Node.js 开发简单的脚手架工具
2018/06/08 Javascript
详解javascript 变量提升(Hoisting)
2019/03/12 Javascript
Vue-cli 移动端布局和动画使用详解
2020/08/10 Javascript
[06:50]DSPL次级职业联赛十强晋级之路
2014/11/18 DOTA
python 参数列表中的self 显式不等于冗余
2008/12/01 Python
改进Django中的表单的简单方法
2015/07/17 Python
pycharm新建一个python工程步骤
2019/07/16 Python
基于Python的身份证验证识别和数据处理详解
2020/11/14 Python
使用css如何制作时间ICON方法实践
2012/11/12 HTML / CSS
科颜氏法国官网:Kiehl’s法国
2019/08/20 全球购物
英国的一家创新礼品和小工具零售商:Menkind
2019/08/24 全球购物
Antler英国官网:购买安特丽行李箱、拉杆箱
2019/08/25 全球购物
灵泰克Java笔试题
2016/01/09 面试题
工地安全检查制度
2014/02/04 职场文书
护士求职自荐信范文
2014/03/19 职场文书
《生命的药方》教学反思
2014/04/08 职场文书
2014年学生会生活部工作总结
2014/11/07 职场文书
2015年团委副书记工作总结
2015/07/23 职场文书
Python中的turtle画箭头,矩形,五角星
2022/03/16 Python