超链接怎么正确调用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 相关文章推荐
从父页面读取和操作iframe中内容方法
Jul 25 Javascript
Jquery实现视频播放页面的关灯开灯效果
May 27 Javascript
兼容所有浏览器的js复制插件Zero使用介绍
Mar 19 Javascript
学习JavaScript设计模式(策略模式)
Nov 26 Javascript
JavaScript面试题大全(推荐)
Sep 22 Javascript
vue实现添加标签demo示例代码
Jan 21 Javascript
js实现省份下拉菜单效果
Feb 15 Javascript
JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容
Jun 12 Javascript
Thinkjs3新手入门之添加一个新的页面
Dec 06 Javascript
r.js来合并压缩css文件的示例
Apr 26 Javascript
详解微信小程序动画Animation执行过程
Sep 23 Javascript
JavaScript实现图片放大预览效果
Nov 02 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
模拟SQLSERVER的两个函数:dateadd(),datediff()
2006/10/09 PHP
PHP swfupload图片上传的实例代码
2013/09/30 PHP
PHP解决URL中文GBK乱码问题的两种方法
2014/06/03 PHP
我见过最全的个人js加解密功能页面
2007/12/12 Javascript
传递参数的标准方法(jQuery.ajax)
2008/11/19 Javascript
Javascript级联下拉菜单以及AJAX数据验证核心代码
2013/05/10 Javascript
Javascript解析URL方法详解
2014/12/05 Javascript
javascript数组去重小结
2016/03/07 Javascript
微信小程序学习(4)-系统配置app.json详解
2017/01/12 Javascript
脚本div实现拖放功能(两种)
2017/02/13 Javascript
webpack打包后直接访问页面图片路径错误的解决方法
2017/06/17 Javascript
jQuery列表检索功能实现代码
2017/07/17 jQuery
随机生成10个不重复的0-100的数字(实例讲解)
2017/08/16 Javascript
微信小程序自定义多选事件的实现代码
2018/05/17 Javascript
jQuery md5加密插件jQuery.md5.js用法示例
2018/08/24 jQuery
vue-父子组件和ref实例详解
2019/11/10 Javascript
nodejs nedb 封装库与使用方法示例
2020/02/06 NodeJs
node.js使用stream模块实现自定义流示例
2020/02/13 Javascript
JavaScript实时更新当前的时间的示例代码
2020/07/15 Javascript
Vue中 axios delete请求参数操作
2020/08/25 Javascript
python批量修改文件名的实现代码
2014/09/01 Python
django ListView的使用 ListView中获取url中的参数值方式
2020/03/27 Python
解决Django no such table: django_session的问题
2020/04/07 Python
在 Windows 下搭建高效的 django 开发环境的详细教程
2020/07/27 Python
Python爬虫之Spider类用法简单介绍
2020/08/04 Python
Python读写Excel表格的方法
2021/03/02 Python
HTML5时代CSS设置漂亮字体取代图片
2014/09/04 HTML / CSS
一款利用纯css3实现的win8加载动画的实例分析
2014/12/11 HTML / CSS
ManoMano英国:欧洲第一家专注于DIY和园艺市场的电商平台
2020/03/12 全球购物
介绍一下常见的木马种类
2014/11/15 面试题
学生请假条格式
2014/04/11 职场文书
教师自我剖析材料(四风问题)
2014/09/30 职场文书
一年级语文下册复习计划
2015/01/17 职场文书
企业开业庆典答谢词
2015/01/20 职场文书
2016秋季小学开学寄语
2015/12/03 职场文书
Pandas-DataFrame知识点汇总
2022/03/16 Python