【原】[webkit移动开发笔记]之空链接是使用javascript:void(0)还是使用#none

简介:

基于webkit内核的移动开发笔记,之前已经写过4篇,主要是关于移动开发重构的分享,今晚有空了再写一篇。

回忆去年年底最后的一个项目,还有一个很怪异的bug,让项目团队的成员感到十分头疼。测试组的同事做完最后的测试回归后,项目发布上线,并通过微信推送链接。在ios系统中(android显示正常),微信内页打开链接后,点击页面的一个按钮,页面被重新加载了,这时才可以对页面进行其它操作。

再次不断试后,我们这边的同事肯定是微信软件内部配置引起的,可是微信的同事也无法定位具体的问题......纠结了很久....

后来啊,想到各种蛋碎,才知道是a标签的引起的

<a href="#none" class="btn" id="btn"></a>

href=“#none” 这是本来是使用空链接,并使用JS控制ID来给按钮添加功能,但是在微信中会导致第一次点击按钮时页面出现重新加载现象......

解决办法如下:

<a href=”javascript:void(0);” class="btn" id="btn"></a>

javascript:void(0) 链接无返回值

在从新浪微博,淘宝首页可以看到,当a标签href为空链接,写法为javascript:void(0),也不是说使用href="#none"就是错误的,在pc端上使用也是没有问题的,也许href="javascript:void(0);"是专业化的一种表现,更值得我们去写,毕竟它解决微信中存在的一个bug...

这次的经历也告诉自己,不可随意设置空链接的a标签为:<a href="#none">按钮</a>,它可能会在你不知情的情况下出现bug,同时发现了自己与他人的差距,还有很多进步的空间,更多是细节上的问题。

 

webkit开发系列:

(1)【原】[基于webkit内核的移动开发笔记]之使用chrome进行手机开发

(2)【原】[基于webkit内核的移动开发笔记]之无法自动播放的audio元素

(3)【原】[基于webkit内核的移动开发笔记]之CSS3径向渐变

(4)【原】[基于webkit内核的移动开发笔记]之如何去除android上a标签产生的边框

 

作者:白树

出处:http://peunzhang.cnblogs.com/

目录
相关文章
|
前端开发 JavaScript 安全
javascript:void(0);用法及常见问题解析
【6月更文挑战第3天】JavaScript 中的 `javascript:void(0)` 用于创建空操作或防止页面跳转。它常见于事件处理程序和超链接的 `href` 属性。然而,现代 web 开发推荐使用 `event.preventDefault()` 替代。使用 `javascript:void(0)` 可能涉及语法错误、微小的性能影响和XSS风险。考虑使用更安全的替代方案,如返回 false 或箭头函数。最佳实践是保持代码清晰、安全和高性能。
5936 0
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
316 0
|
JavaScript 前端开发 Java
JavaScript笔记(回顾一,基础知识篇)
JavaScript基础知识点回顾,包括语言定义、ECMAScript规范、字面量、变量声明、操作符、关键字、注释、流程控制语句、数据类型、类型转换和引用数据类型等。
JavaScript笔记(回顾一,基础知识篇)
|
JavaScript 前端开发
javascript:void(0) 含义
javascript:void(0) 含义
262 2
|
移动开发 JavaScript 前端开发
专为webkit内核而生的javascript库mango正式发布
专为webkit内核而生的javascript库mango正式发布
|
JavaScript vr&ar 数据库
技术笔记:Js获取当前日期时间及其它操作
技术笔记:Js获取当前日期时间及其它操作
719 1
|
存储 缓存 自然语言处理
深入理解JS | 青训营笔记
深入理解JS | 青训营笔记
123 0
|
移动开发 JavaScript 前端开发
使用GruntJS链接与压缩多个JavaScript文件
使用GruntJS链接与压缩多个JavaScript文件
86 3
|
JavaScript
JS【实战】跨域的网页链接跳转
JS【实战】跨域的网页链接跳转
134 0
|
JSON JavaScript 前端开发