超链接怎么正确调用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 相关文章推荐
js removeChild 障眼法 可能出现的错误
Oct 06 Javascript
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
Oct 10 Javascript
深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP
Jan 15 Javascript
深入分析Javascript跨域问题
Apr 17 Javascript
JS组件Form表单验证神器BootstrapValidator
Jan 26 Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
May 17 Javascript
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
Jun 07 Javascript
纯css下拉菜单 无需js
Aug 15 Javascript
通过BootStrap实现轮播图的实际应用
Sep 26 Javascript
Angular4开发解决跨域问题详解
Aug 28 Javascript
node.js利用mongoose获取mongodb数据的格式化问题详解
Oct 06 Javascript
使用vscode快速建立vue模板过程详解
Oct 10 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&amp;&amp;mysql)二
2006/10/09 PHP
PHP获得用户使用的代理服务器ip即真实ip
2006/12/31 PHP
将时间以距今多久的形式表示,PHP,js双版本
2012/09/25 PHP
解析PHP SPL标准库的用法(遍历目录,查找固定条件的文件)
2013/06/18 PHP
PHP通过微信跳转的Code参数获取用户的openid(关键代码)
2016/07/06 PHP
php通过会话控制实现身份验证实例
2016/10/18 PHP
用javascript获得地址栏参数的两种方法
2006/11/08 Javascript
js TextArea的选中区域处理
2010/12/28 Javascript
让innerText在firefox火狐和IE浏览器都能用的写法
2011/05/14 Javascript
js实现在文本框光标处添加字符的方法介绍
2012/11/24 Javascript
JavaScript跨域方法汇总
2014/10/16 Javascript
express的中间件cookieParser详解
2014/12/04 Javascript
js实现的简洁网页滑动tab菜单效果代码
2015/08/24 Javascript
nodejs简单实现操作arduino
2016/09/25 NodeJs
Webpack 服务器端代码打包的示例代码
2017/09/19 Javascript
Vue 构造选项 - 进阶使用说明
2020/08/14 Javascript
详解Python设计模式编程中观察者模式与策略模式的运用
2016/03/02 Python
python3利用smtplib通过qq邮箱发送邮件方法示例
2017/12/03 Python
python实现下载pop3邮件保存到本地
2018/06/19 Python
详解python 注释、变量、类型
2018/08/10 Python
Python中文编码知识点
2019/02/18 Python
python图像和办公文档处理总结
2019/05/28 Python
python for和else语句趣谈
2019/07/02 Python
pytorch 在sequential中使用view来reshape的例子
2019/08/20 Python
python 矢量数据转栅格数据代码实例
2019/09/30 Python
Python之——生成动态路由轨迹图的实例
2019/11/22 Python
do you have any Best Practice for testing
2016/06/04 面试题
文员岗位职责
2013/11/09 职场文书
大学生最新职业生涯规划书范文
2014/01/12 职场文书
青蓝工程实施方案
2014/03/27 职场文书
2014年酒店工作总结与计划
2014/11/17 职场文书
婚育证明样本
2015/06/16 职场文书
城镇居民医疗保险工作总结
2015/08/10 职场文书
学校运动会开幕词
2016/03/03 职场文书
原生Js 实现的简单无缝滚动轮播图的示例代码
2021/05/10 Javascript
Java 中的 Lambda List 转 Map 的多种方法详解
2022/07/07 Java/Android