超链接怎么正确调用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 checkbox全选/取消全选实现代码
Nov 14 Javascript
js 处理URL实用技巧
Nov 23 Javascript
javascript数字格式化通用类 accounting.js使用
Aug 24 Javascript
js charAt的使用示例
Feb 18 Javascript
jquery显示loading图片直到网页加载完成的方法
Jun 25 Javascript
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
May 16 Javascript
Vue.js每天必学之表单控件绑定
Sep 05 Javascript
javascript实现右下角广告框效果
Feb 01 Javascript
JavaScript简单拖拽效果(1)
May 17 Javascript
js实现简单模态框实例
Nov 16 Javascript
17道题让你彻底理解JS中的类型转换
Aug 08 Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
Sep 17 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 的 __FILE__ 常量
2007/01/15 PHP
生成静态页面的php函数,php爱好者站推荐
2007/03/19 PHP
PHP setcookie设置Cookie用法(及设置无效的问题)
2011/07/13 PHP
session在php5.3中的变化 session_is_registered() is deprecated in
2013/11/12 PHP
PHP 快速排序算法详解
2014/11/10 PHP
php 无限分类 树形数据格式化代码
2016/10/11 PHP
详解php用curl调用接口方法,get和post两种方式
2017/01/13 PHP
PHP基于正则批量替换Img中src内容实现获取缩略图的功能示例
2017/06/07 PHP
js innerHTML 改变div内容的方法
2013/08/03 Javascript
Js中的onblur和onfocus事件应用介绍
2013/08/27 Javascript
Jquery 切换不同图片示例代码
2013/12/05 Javascript
使用apply方法实现javascript中的对象继承
2013/12/16 Javascript
jQuery预加载图片常用方法
2015/06/15 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
2016/12/02 Javascript
js正则表达式验证表单【完整版】
2017/03/06 Javascript
基于react后端渲染模板引擎noox发布使用
2018/01/11 Javascript
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
2018/09/25 Javascript
jQuery操作attr、prop、val()/text()/html()、class属性
2019/05/23 jQuery
JS中call()和apply()的功能及用法实例分析
2019/06/28 Javascript
vue+openlayers绘制省市边界线
2020/12/24 Vue.js
详解阿里Node.js技术文档之process模块学习指南
2021/01/04 Javascript
python OpenCV学习笔记之绘制直方图的方法
2018/02/08 Python
详解PyCharm配置Anaconda的艰难心路历程
2018/08/13 Python
详解基于python-django框架的支付宝支付案例
2019/09/23 Python
Python ORM编程基础示例
2020/02/02 Python
django 外键创建注意事项说明
2020/05/20 Python
瑰珀翠美国官网:Crabtree & Evelyn美国
2016/11/29 全球购物
北京某公司的.net笔试题
2014/03/20 面试题
我未来的职业规划范文
2014/01/11 职场文书
年度献血先进个人事迹材料
2014/02/14 职场文书
学习党的群众路线教育实践活动心得体会
2014/03/01 职场文书
电子信息工程自荐信
2014/05/26 职场文书
五一劳动节慰问信
2015/02/14 职场文书
幼儿园小班开学寄语(2016秋季)
2015/12/03 职场文书
SpringDataJPA在Entity中常用的注解介绍
2021/12/06 Java/Android
python使用BeautifulSoup 解析HTML
2022/04/24 Python