摘要:移動端不能使用,因為會有。然后并沒有解決點擊態用戶點擊的瞬間要有及時的外觀變化反饋的問題。利用偽類來設置某元素被點擊時的點擊態樣式。需要變成按鈕的的對象直接把創建的傳給的不阻止默認事件。當用戶傳入了參數時候,分別給綁定了和事件。
移動端不能使用click,因為click會有300ms。所有有了fastclick這樣的解決方案。然后fastclick并沒有解決點擊態(用戶點擊的瞬間要有及時的外觀變化反饋)的問題。hover會有不消失的問題,所有大家一般用:active。利用 :active 偽類來設置某元素被點擊時的點擊態樣式。
在IOS上使用active必須聲明下面js:
document.addEventListener("touchstart", function() {},false);
CSS中記得去掉highlight color:
-webkit-tap-highlight-color: rgba(0,0,0,0);
需要注意的是:Android 2.x 仍不支持:active。
那么就 fastclick + :active + 一堆聲明 + 放棄部分系統的兼容?
有沒有更好的解決方案?且看AlloyTouch Button插件~~
語法new AlloyTouch.Button(selector, onTap [,activeClass])
selector:需要變成按鈕的選擇器
onTap: 用戶點擊按鈕的回調函數
activeClass:可選參數,點擊狀態下添加的class
使用方式new AlloyTouch.Button("#button", function () { console.log("You tapped me."); }, "active");在線演示 原理
AlloyTouch.Button = function (selector, tap, active) { var element = typeof selector === "string" ? document.querySelector(selector) : selector; var option = { touch: selector, tap: tap, preventDefault: false }; if (active !== undefined) { option.touchStart = function ( ) { addClass(element, active); }; touchMove = function ( ) { removeClass(element, active); }; option.touchEnd = function ( ) { removeClass(element, active); }; option.touchCancel = function () { removeClass(element, active); }; } new AlloyTouch(option); }
在創建Button對象實例的時候,其實創建了AlloyTouch對象實例。這里分析在option。
touch: selector 需要變成按鈕的的對象
tap: tap 直接把創建button的tap傳給alloytouch的tap
preventDefault: false 不阻止默認事件。不然的話,手指放在button上時,頁面拖不動。
當用戶傳入了active參數時候,分別給綁定了touchMove、toucStart、touchEnd和touchCancel事件。
touchMove、touchEnd和touchCancel均會移除active的class。
toucStart會增加active的class。
最后更多例子演示和代碼可以在Github上找到。
Github:https://github.com/AlloyTeam/AlloyTouch
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/91329.html
摘要:在我們深入研究這項新鮮的技術之前,讓我們先快速的復習原理的相關知識。同時,希望本文能對大家有所幫助。工欲善其事,必先利其器。 flex.css快速入門,極速布局 什么是flex.css? css3 flex 布局相信很多人已經聽說過甚至已經在開發中使用過它,但是我想我們都會有一個共同的經歷,面對它的各種版本,各種坑,傻傻的分不清楚,flex.css就是對flex布局的一種封裝,通過簡潔...
閱讀 786·2021-08-23 09:46
閱讀 928·2019-08-30 15:44
閱讀 2586·2019-08-30 13:53
閱讀 3039·2019-08-29 12:48
閱讀 3847·2019-08-26 13:46
閱讀 1780·2019-08-26 13:36
閱讀 3510·2019-08-26 11:46
閱讀 1408·2019-08-26 10:48