Record the process of simulating CSS active effect by JS

The so-called interface touch effect is that when the user clicks it, the interface immediately changes to the user to know: "OK, I already know what you clicked ~", Some people also say "click the highlighted effect ". -- Undoubtedly, this is a very important means of communication in Human-Computer Interaction and is also very common. At that time, when I was trying to achieve this, I thought it was not just adding a: hover effect to the link on the webpage ~ If the link does not work, you can simply add "image flip. -- Clinker: on mobile terminals, It takes far more time than imagined. First, I tend to adopt a pure style method. The general idea is to write a style in a normal state. After a user clicks, the style is classified as another State, and the corresponding style of the state is written. In this way, I immediately thought of "element: hover ". Tested
There is no problem on the PC, but the list controls, especially on the mobile phone, appear too sensitive, sometimes in conflict with rolling events, sometimes there are strange bugs, so think about it, should not use hover, should be using "elements: active ). After switching to active, the above problem is solved immediately. To put it simply, the actice effect, compared with the hover effect, is the style that the active can unbind from the fingers.

/* Common effect */. x_list Li {padding: 3px; width: 100%; List-style: none; Background-color: #999;/* background color of normal effects */border-bottom: 1px solid #333; border-top: 1px solid white; clear: Both; display: inline-table; position: relative;}/* click effect */. x_list Li: Active {background-color: red ;}

It seems that although hover and acitve are close to each other, there is a difference in detail. In the past, hover was generally used for desktop purposes. Today, the difference between hover and acitve is highlighted on mobile phones. I think, what is the reason?-Why is the previous desktop practice working, but the problems are exposed on mobile phones. I think it is also important to execute "event Media", because most input events on the desktop are mouse, and most input events on the mobile phone are on the finger. The separation of the two results in different experiences and rules. It can be said that the bug that we undertook was all at work for the same reason.

However, even if you use active, you may encounter a browser support problem: -- Android 2.x still does not support the element "active". The new versions of Android 4.x and iOS pass smoothly. So I arranged for iOS and Android 4 to write in CSS, while the other android side arranged JS methods for implementation.

Since it is implemented using the js method, I first came up with the setTimeout () timer. Click and add the same style. The style is revoked after timeout.

// After you press it, add a highlighted style to the element and immediately fade away. -- this is the so-called active style. // Note that this method belongs to function onactive (El, FN) {el. addcls ('active'); setTimeout (function () {fn & FN (); El. removecls ('active') ;}, 300 );}

This seemingly feasible method is actually incorrect! After the demonstration by the leaders, the selected highlight of sencha touch can be scroll. My click highlight on the home page is OK, but it does not respond to the click scroll. This is an exception! Fortunately, there is a correct case that can be corrected by reference. Later, the touch effect of the interface was achieved through the touchstart/touchend event. The Code is as follows:

Htmlelement. prototype. onactive = (function () {/*** this should be css selector * @ Param {event} e */function highlight (e) {var targetel = e.tar get; if (targetel & targetel. tagname = This. touppercase () {targetel. togglecls ('active');} else if (targetel) {arguments. callee. call (this, {target: targetel. parentnode}) ;}}// whether the touch event var issupporttouch = 'ontouchstart' in window | "ontouchend" In Touch upload Doc ument ;/ /Replace var hightevent_in = issupporttouch with the corresponding event in touch mode? 'Touchstart': 'mouseover', hightevent_out = issupporttouch? 'Touchend': 'mouseout';/*** @ Param {string} highlightcfg */return function (el_cssselector) {// only for moblie? If (! Window. navigator. isandroid_2) {return false;} var eventhandler = highlight. BIND (el_cssselector | 'lil'); // change the style by default. // $. addlistener is used to add a cross-browser event $. addlistener (this, hightevent_in, eventhandler); $. addlistener (this, hightevent_out, eventhandler); // $. addlistener (this, 'touchcancel', eventhandler, isusecapture);/* @ todo evaluate the event, special */return this; // convenient chained call }})();

The above Code expands the browser's native object htmlelment prototype, so there is an onactive Method on any element, and togglecls (classname) is also provided by the extension element prototype. Correspondingly, styles are not implemented by pseudo classes, but are defined as a. Active style class:

/* Click effect */. x_list Li. Active {/* Note that the colon is changed to the dot */background-color: red ;}

In the highlight function, because the usercapture cannot be triggered during event registration, the "event bubbling" method is not used, but the method of recursive reporting.

This function was reorganized. Note that there is no version check. You should add one by yourself because it is only for Android 2.x.

/*** Simulate El: Active * @ Param {element} the UL parameter is the element */function onactive (UL) {// only for Android 2.x? Yes! // Check whether the android 2.x attribute is correct. You can rely on your own solution, so I will not post it, which is relatively simple. // If (! Window. navigator. isandroid_2) {// return ul; // even if this function does not work, return this to facilitate chained call. //} // Add highlightul. addeventlistener ('touchstart', function (e) {var targetel = e.tar get; while (targetel & targetel. tagname! = 'Lil') {// The default style is Li. targetel = targetel. parentnode; // until the target element to be operated is found.} // do something ...... Console. log (targetel. tagname); targetel. addcls ('active') ;}); // remove highlightul. addeventlistener ('touchend', function (e) {var targetel = e.tar get; while (targetel & targetel. tagname! = "Li") {targetel = targetel. parentnode; // locate the target element to be operated.} // do something ...... Console. Log (targetel. tagname); targetel. removecls ('active') ;}); return ul; // convenient chained call}

The CSS style is as follows:

/* Click effect */ul. x_list Li: active, ul. x_list Li. active {background-image:-WebKit-gradient (linear, center top, center bottom, from (lightgrey), to (white ));}

I reorganized the problem and gave the following "Prescription ":

<style type="text/css">p:active, p.active{background-color:red;}</style><body><p>Welcome to JdropJdrop 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></body><script type="text/javascript">document.addEventListener('touchstart', function (e) {e.target.className = 'active';}, false);document.addEventListener('touchend', function (e) {e.target.className = '';}, false);</script>

It is reasonable to use event delegation.