超链接怎么正确调用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 27 Javascript
跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明
May 04 Javascript
jQuery Clone Bug解决代码
Dec 22 Javascript
iframe窗口高度自适应的又一个巧妙实现思路
Apr 04 Javascript
深入理解$.each和$(selector).each
May 15 Javascript
浅谈js图片前端预览之filereader和window.URL.createObjectURL
Jun 30 Javascript
深入浅析javascript继承体系
Oct 23 Javascript
Vue路由对象属性 .meta $route.matched详解
Nov 04 Javascript
基于JavaScript或jQuery实现网站夜间/高亮模式
May 30 jQuery
vue 实现动态路由的方法
Jul 06 Javascript
如何在现代JavaScript中编写异步任务
Jan 31 Javascript
Vue的列表之渲染,排序,过滤详解
Feb 24 Vue.js
以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使用指南
2015/02/05 PHP
PHP面向对象程序设计实例分析
2016/01/26 PHP
PHP扩展Swoole实现实时异步任务队列示例
2019/04/13 PHP
Laravel框架之解决前端显示图片问题
2019/10/24 PHP
提高代码性能技巧谈—以创建千行表格为例
2006/07/01 Javascript
JS解析XML实例分析
2015/01/30 Javascript
分享9点个人认为比较重要的javascript 编程技巧
2015/04/27 Javascript
JavaScript模板引擎用法实例
2015/07/10 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
2016/10/15 Javascript
localStorage的黑科技-js和css缓存机制
2017/02/06 Javascript
移动端触摸滑动插件swiper使用方法详解
2017/08/11 Javascript
使用Node.js实现ORM的一种思路详解(图文)
2017/10/24 Javascript
JSON的parse()方法介绍
2019/01/31 Javascript
nodejs分离html文件里面的js和css的方法
2019/04/09 NodeJs
react国际化化插件react-i18n-auto使用详解
2020/03/31 Javascript
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
2020/07/17 Javascript
js实现可爱的气泡特效
2020/09/05 Javascript
vue项目中播放rtmp视频文件流的方法
2020/09/17 Javascript
vue render函数动态加载img的src路径操作
2020/10/26 Javascript
JavaScript中展开运算符及应用的实例代码
2021/01/14 Javascript
在Python中使用pngquant压缩png图片的教程
2015/04/09 Python
详细讲解Python中的文件I/O操作
2015/05/24 Python
Python基于smtplib实现异步发送邮件服务
2015/05/28 Python
django数据关系一对多、多对多模型、自关联的建立
2019/07/24 Python
Pytorch模型转onnx模型实例
2020/01/15 Python
Python3自动生成MySQL数据字典的markdown文本的实现
2020/05/07 Python
Python可以实现栈的结构吗
2020/05/27 Python
学习Python爬虫的几点建议
2020/08/05 Python
全网最全python库selenium自动化使用详细教程
2021/01/12 Python
CSS3伪类选择器:nth-child()
2009/04/02 HTML / CSS
学习十八大精神心得体会
2013/12/31 职场文书
人事专员工作职责
2014/02/22 职场文书
广告学专业求职信
2014/06/19 职场文书
会议欢迎标语
2014/06/30 职场文书
同意报考公务员证明
2015/06/17 职场文书
golang生成vcf通讯录格式文件详情
2022/03/25 Golang