记一次 JS 模拟 CSS active 效果的过程

转自： http://blog.csdn.net/zhangxin09/article/details/8253679

所谓的界面触控效果，就是用户点下去的时候，界面立刻产生变化以反馈给用户知道：“ok，你点击的吩咐，我已晓得罗～”，也有人说“点击高亮的效果”。——毋庸置疑，这是人机交互中非常重要沟通手段，使用得也非常常见的。当时我要实现这效果的时候，自己还满认为，不就是网页上为链接加个 a:hover 效果嘛～链接不行的加个“图片翻转”不就可以了。——孰料，在移动终端上，花费的时间远超想像。首先，我倾向于采用纯样式的方法，大体思路是：普通状态写一种样式；用户点击后归为另外一种状态，写出其状态对应样式。这样，我立刻想到的时“元素:hover”。经测试 PC 上无问题，但手机上尤其列表控件显得过于灵敏，有时与滚动事件冲突，有时出现奇怪的 bug，于是想想，不应使用 hover，应是采用“元素:active”才对(active 意即“击中”那一下，hover 仅仅“移上”意思)。改用 active 后，上述问题立即迎刃而解。简单说，active 效果与 hover 效果相比，就是 active 点击后会撤销手指松开的样式。

[css]  view plain copy

1. /* 普通效果 */  
2. .x_list li {  
3.     padding: 3px;  
4.     width: 100%;  
5.     list-style: none;  
6.     background-color: #999;/*普通效果的背景色*/  
7.     border-bottom: 1px solid #333;  
8.     border-top: 1px solid white;  
9.     clear: both;  
10.     display: inline-table;  
11.     position: relative;  
12. }  
13. /* 点击效果 */  
14. .x_list li:active{  
15.     background-color:red;  
16. }  

看来，hover 与 active 意思虽相近，但细作起来还是明显差别。以往讨论桌面的时候，大多用 hover 即可，而现如今在手机上却把两者的区别给凸显出来了。我想，这是什么缘故呢，——为什么以往桌面的做法行得通，而手机上却把问题暴露出来呢。我觉得，执行“事件的媒介”也是重要的原因，因为桌面上输入事件的乃鼠标器居多，而且手机上则围绕手指触控的居多。两者的分野，导致所处于的经验与法则也不尽相同。可以说，承接下来的那个 bug，都有同样的缘故在作祟。

可是，即使使用 active，又遇到浏览器支持的问题：——Android 2.x 仍不支持元素:active，新版的 Android 4.x 和 iOS 则顺利通过。于是我安排 iOS 与 Android 4 就用 CSS 的写法，而 Android 另一边厢安排 js 方法实现之。

既然用 js 方法实现之，我第一时间想到的用 setTimeout() 定时器实现之。点击后添加一样式，timeout 之后撤销样式。

[javascript]  view plain copy

1. // 用户按下之后，为元素加入高亮样式，然后立刻消褪，——这就是所谓的 active 样式。  
2. // 请注意，这个方法属于“反面教材”  
3. function onActive(el, fn){  
4.     el.addCls('active');  
5.     setTimeout(function(){  
6.         fn && fn();  
7.         el.removeCls('active');  
8.     }, 300);  
9. }  

这个貌似可行的办法实则不正确！因为经过领导演示，人家 Sencha Touch 的选中高亮是可以跟随滚动的，我的在首页上的点击高亮是可以但不会响应点击滚动，有反常理！甚幸，恰恰有正确的案例在前，让我可以参照，可以纠正。后来结果通过 touchstart/touchend 事件实现这个界面触控效果。代码如下：

[javascript]  view plain copy

1. HTMLElement.prototype.onActive = (function () {  
2.     /** 
3.      * this 应为 CSS Selector 
4.      * @param {Event} e 
5.      */  
6.     function highlight(e){  
7.         var targetEl = e.target;  
8.         if(targetEl && targetEl.tagName == this.toUpperCase()){  
9.             targetEl.toggleCls('active');  
10.         }else if(targetEl){  
11.             arguments.callee.call(this, {  
12.                 target : targetEl.parentNode  
13.             });  
14.         }  
15.     }  
16.   
17.     // 是否支持触摸事件  
18.     var isSupportTouch = 'ontouchstart' in window || "ontouchend" in window.document;  
19.     // 支持触摸式使用相应的事件替代  
20.     var hightEvent_in  = isSupportTouch ? 'touchstart': 'mouseover',  
21.         hightEvent_out = isSupportTouch ? 'touchend' : 'mouseout';  
22.   
23.     /** 
24.       * @param {String} highlightCfg 
25.       */  
26.     return function(el_cssSelector){  
27.         // ONLY FOR Moblie?  
28.         if (!window.navigator.isAndroid_2) {  
29.             return false;  
30.         }  
31.         var eventHandler = highlight.bind(el_cssSelector || 'LI'); // 默认 li 修改样式  
32.         // $$.addListener 为跨浏览器的事件添加器  
33.         $$.addListener(this,  hightEvent_in, eventHandler);  
34.         $$.addListener(this, hightEvent_out, eventHandler);  
35. //      $$.addListener(this, 'touchcancel',eventHandler, isUseCapture); /*@todo考察该事件，比较特殊*/  
36.          return this; // 方便链式调用  
37.     }  
38. })();  

上述代码扩展的浏览器原生对象 HTMLElment 原型，因此在任一元素身上都有 onActive 方法，另外 toggleCls(className) 也是通过扩展元素原型来提供的。相应地，样式不经过伪类来实现，而是定义一个 .active 的样式类：

[css]  view plain copy

1. /* 点击效果 */  
2. .x_list li.active{ /* 注意这里冒号被改为点号*/  
3.     background-color:red;  
4. }  

函数 highlight 中，因为登记事件时不能触发 userCapture，所以没有使用“事件冒泡”的方式而是递归上报的方式。

2013-4-7 重新整理一下这个函数，请注意这是没有版本检测，你应该自己加一个，因为只针对 android 2.x。

[javascript]  view plain copy

1. /** 
2.  * 模拟 el:active 
3.  * @param {Element} ul 参数为元素 
4.  */  
5. function onActive(ul){  
6.     // ONLY FOR Android 2.x? Yes!  
7.     // 检测是否 android 2.x 的属性，你可以依赖你自己的方案，我的就不贴了，比较简单的。  
8.     // if (!window.navigator.isAndroid_2) {  
9.         // return ul; //尽管该函数不工作，也要返回 this，以方便链式调用  
10.     // }  
11.       
12.     // add Highlight  
13.     ul.addEventListener('touchstart', function (e){  
14.         var targetEl = e.target;  
15.         while(targetEl && targetEl.tagName != 'LI'){// 默认为 li 修改样式  
16.             targetEl = targetEl.parentNode;         // 找到要操作的目标元素为止  
17.         }  
18.         // do sth……  
19.         console.log(targetEl.tagName);  
20.         targetEl.addCls('active');  
21.     });  
22.   
23.     // remove Highlight  
24.     ul.addEventListener('touchend',   function (e){  
25.         var targetEl = e.target;  
26.         while(targetEl && targetEl.tagName != "LI"){  
27.             targetEl = targetEl.parentNode; // 找到要操作的目标元素为止  
28.         }  
29.         // do sth……  
30.         console.log(targetEl.tagName);  
31.         targetEl.removeCls('active');  
32.     });   
33.       
34.     return ul; // 方便链式调用  
35. }  

CSS 样式如下：

[css]  view plain copy

1. /* 点击效果 */  
2. ul.x_list li:active, ul.x_list li.active {  
3.     background-image: -webkit-gradient(linear, center top, center bottom, from(lightGrey), to(white));  
4. }  

2013-04-18 把问题重新整理了一下，给出如下“药方”：

[html]  view plain copy

1. <style type="text/css">  
2. p:active, p.active{  
3.     background-color:red;  
4. }  
5. </style>  
6. <body>  
7.     <p>Welcome to Jdrop  
8. Jdrop provides a place to store JSON data in the cloud. The initial application is for storing performance data gathered from mobile devices. It's hard to analyze large amounts of information (HTTP waterfall charts, HTTP headers, document source, etc.) on a mobile device. Jdrop lets you gather this data on the mobile device but analyze it remotely on a larger screen. </p>  
9. </body>  
10. <script type="text/javascript">  
11.     document.addEventListener('touchstart', function (e) {  
12.         e.target.className = 'active';  
13.     }, false);  
14.     document.addEventListener('touchend', function (e) {  
15.         e.target.className = '';  
16.     }, false);  
17. </script>  

使用了事件委托比较合理。