超链接怎么正确调用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 相关文章推荐
Javascript中查找不以XX字符结尾的单词示例代码
Oct 15 Javascript
3分钟写出来的Jquery版checkbox全选反选功能
Oct 23 Javascript
javascript 拷贝节点cloneNode()使用介绍
Apr 03 Javascript
node.js中的fs.utimes方法使用说明
Dec 15 Javascript
JavaScript设计模式之装饰者模式介绍
Dec 28 Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
Jan 05 Javascript
Angular实现跨域(搜索框的下拉列表)
Feb 16 Javascript
Bootstrap模态框(Modal)实现过渡效果
Mar 17 Javascript
深入理解JavaScript 箭头函数
May 30 Javascript
操作按钮悬浮固定在微信小程序底部的实现代码
Aug 02 Javascript
微信小程序使用GoEasy实现websocket实时通讯
May 19 Javascript
Vue组件为什么data必须是一个函数
Jun 11 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使用pear_smtp发送邮件
2016/04/15 PHP
Yii2 rbac权限控制之rule教程详解
2016/06/23 PHP
Javascript 阻止javascript事件冒泡,获取控件ID值
2009/06/27 Javascript
javascript创建数组之联合数组的使用方法示例
2013/12/26 Javascript
javascript表单验证使用示例(javascript验证邮箱)
2014/01/07 Javascript
控制文字内容的显示与隐藏示例
2014/06/11 Javascript
JS显示下拉列表框内全部元素的方法
2015/03/31 Javascript
JavaScript实现模仿桌面窗口的方法
2015/07/18 Javascript
JavaScript动态提示输入框输入字数的方法
2015/07/27 Javascript
基于javascript实现九宫格大转盘效果
2020/05/28 Javascript
onclick和onblur冲突问题的快速解决方法
2016/04/28 Javascript
Svg.js实例教程及使用手册详解(一)
2016/05/16 Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
2017/02/27 Javascript
angular2+node.js express打包部署的实战
2017/07/27 Javascript
vue2.0+vue-dplayer实现hls播放的示例
2018/03/02 Javascript
JS实现的简单折叠展开动画效果示例
2018/04/28 Javascript
详解使用create-react-app快速构建React开发环境
2018/05/16 Javascript
JS实现获取当前所在周的周六、周日示例分析
2019/05/11 Javascript
[44:01]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS paiN
2018/03/31 DOTA
Python中int()函数的用法浅析
2017/10/17 Python
python基于ID3思想的决策树
2018/01/03 Python
python学习入门细节知识点
2018/03/29 Python
python多进程控制学习小结
2018/10/31 Python
使用Python实现毫秒级抢单功能
2019/06/06 Python
关于python中密码加盐的学习体会小结
2019/07/15 Python
详解使用django-mama-cas快速搭建CAS服务的实现
2019/10/30 Python
pycharm激活码有效到2020年11月底
2020/09/18 Python
Python使用GitPython操作Git版本库的方法
2020/02/29 Python
CSS3网格的三个新特性详解
2014/04/04 HTML / CSS
IE浏览器单独写CSS样式的几种方法
2014/10/14 HTML / CSS
介绍一下Java的安全机制
2012/06/28 面试题
医学生自我评价
2014/01/27 职场文书
退休感言
2014/01/28 职场文书
致100米运动员广播稿
2014/02/14 职场文书
出纳员岗位职责
2014/03/13 职场文书
浅谈Python列表嵌套字典转化的问题
2021/04/07 Python