搜尋
首頁web前端js教程如何使用Zepto tap事件的穿透與點透(附程式碼)

這次帶給大家如何使用Zepto tap事件的穿透與點透(附程式碼),使用Zepto tap事件的穿透與點透注意事項有哪些,下面就是實戰案例,一起來看一下。

首先,什麼是zepto tap事件穿透?

tap事件穿透就是,有多個層級上有綁定事件,最上層的綁定了tap事件,下層綁定了click事件,在執行完上層事件後會觸發下層事件,進而出現事件穿透。如果下層是input標籤,必穿透。

究其原因:

是因為zepto實作tap事件是冒泡到document上時才觸發的,也就是tap事件是綁定在document上,而click事件有延遲執行。

下面我們貼下zepto.1.1.6 tap事件的原始碼:

<span style="font-size: 14px;">;(function($){<br>    var touch = {},<br>        touchTimeout, tapTimeout, swipeTimeout, longTapTimeout,<br>        longTapDelay = 750,<br>        gesture<br>    function swipeDirection(x1, x2, y1, y2) {<br>        return Math.abs(x1 - x2) >=<br>            Math.abs(y1 - y2) ? (x1 - x2 > 0 ? 'Left' : 'Right') : (y1 - y2 > 0 ? 'Up' : 'Down')<br>    }<br>    function longTap() {<br>        longTapTimeout = null<br>        if (touch.last) {<br>            touch.el.trigger('longTap')<br>            touch = {}<br>        }<br>    }<br>    function cancelLongTap() {<br>        if (longTapTimeout) clearTimeout(longTapTimeout)<br>        longTapTimeout = null<br>    }<br>    function cancelAll() {<br>        if (touchTimeout) clearTimeout(touchTimeout)<br>        if (tapTimeout) clearTimeout(tapTimeout)<br>        if (swipeTimeout) clearTimeout(swipeTimeout)<br>        if (longTapTimeout) clearTimeout(longTapTimeout)<br>        touchTimeout = tapTimeout = swipeTimeout = longTapTimeout = null<br>        touch = {}<br>    }<br>    function isPrimaryTouch(event){<br>        return (event.pointerType == 'touch' ||<br>            event.pointerType == event.MSPOINTER_TYPE_TOUCH)<br>            && event.isPrimary<br>    }<br>    function isPointerEventType(e, type){<br>        return (e.type == 'pointer'+type ||<br>            e.type.toLowerCase() == 'mspointer'+type)<br>    }<br>    $(document).ready(function(){<br>        var now, delta, deltaX = 0, deltaY = 0, firstTouch, _isPointerType<br>        if ('MSGesture' in window) {<br>            gesture = new MSGesture()<br>            gesture.target = document.body<br>        }<br>        $(document)<br>            .bind('MSGestureEnd', function(e){<br>                var swipeDirectionFromVelocity =<br>                        e.velocityX > 1 ? 'Right' : e.velocityX  1 ? 'Down' : e.velocityY                 if (swipeDirectionFromVelocity) {<br>                    touch.el.trigger('swipe')<br>                    touch.el.trigger('swipe'+ swipeDirectionFromVelocity)<br>                }<br>            })<br>            .on('touchstart MSPointerDown pointerdown', function(e){<br>                if((_isPointerType = isPointerEventType(e, 'down')) &&<br>                    !isPrimaryTouch(e)) return<br>                firstTouch = _isPointerType ? e : e.touches[0]<br>                if (e.touches && e.touches.length === 1 && touch.x2) {<br>                    // Clear out touch movement data if we have it sticking around<br>                    // This can occur if touchcancel doesn't fire due to preventDefault, etc.<br>                    touch.x2 = undefined<br>                    touch.y2 = undefined<br>                }<br>                now = Date.now()<br>                delta = now - (touch.last || now)<br>                touch.el = $('tagName' in firstTouch.target ?<br>                    firstTouch.target : firstTouch.target.parentNode)<br>                touchTimeout && clearTimeout(touchTimeout)<br>                touch.x1 = firstTouch.pageX<br>                touch.y1 = firstTouch.pageY<br>                if (delta > 0 && delta                 touch.last = now<br>                longTapTimeout = setTimeout(longTap, longTapDelay)<br>                // adds the current touch contact for IE gesture recognition<br>                if (gesture && _isPointerType) gesture.addPointer(e.pointerId);<br>            })<br>            .on('touchmove MSPointerMove pointermove', function(e){<br>                if((_isPointerType = isPointerEventType(e, 'move')) &&<br>                    !isPrimaryTouch(e)) return<br>                firstTouch = _isPointerType ? e : e.touches[0]<br>                cancelLongTap()<br>                touch.x2 = firstTouch.pageX<br>                touch.y2 = firstTouch.pageY<br>                deltaX += Math.abs(touch.x1 - touch.x2)<br>                deltaY += Math.abs(touch.y1 - touch.y2)<br>            })<br>            .on('touchend MSPointerUp pointerup', function(e){<br>                if((_isPointerType = isPointerEventType(e, 'up')) &&<br>                    !isPrimaryTouch(e)) return<br>                cancelLongTap()<br>                // swipe<br>                if ((touch.x2 && Math.abs(touch.x1 - touch.x2) > 30) ||<br>                    (touch.y2 && Math.abs(touch.y1 - touch.y2) > 30))<br>                    swipeTimeout = setTimeout(function() {<br>                        touch.el.trigger('swipe')<br>                        touch.el.trigger('swipe' + (swipeDirection(touch.x1, touch.x2, touch.y1, touch.y2)))<br>                        touch = {}<br>                    }, 0)<br>                // normal tap<br>                else if ('last' in touch)<br>                // don't fire tap when delta position changed by more than 30 pixels,<br>                // for instance when moving to a point and back to origin<br>                    if (deltaX                         // delay by one tick so we can cancel the 'tap' event if 'scroll' fires<br>                        // ('tap' fires before 'scroll')<br>                        tapTimeout = setTimeout(function() {<br>                            // trigger universal 'tap' with the option to cancelTouch()<br>                            // (cancelTouch cancels processing of single vs double taps for faster 'tap' response)<br>                            var event = $.Event('tap')<br>                            event.cancelTouch = cancelAll<br>                            touch.el.trigger(event)<br>                            // trigger double tap immediately<br>                            if (touch.isDoubleTap) {<br>                                if (touch.el) touch.el.trigger('doubleTap')<br>                                touch = {}<br>                            }<br>                            // trigger single tap after 250ms of inactivity<br>                            else {<br>                                touchTimeout = setTimeout(function(){<br>                                    touchTimeout = null<br>                                    if (touch.el) touch.el.trigger('singleTap')<br>                                    touch = {}<br>                                }, 250)<br>                            }<br>                        }, 0)<br>                    } else {<br>                        touch = {}<br>                    }<br>                deltaX = deltaY = 0<br>            })<br>            // when the browser window loses focus,<br>            // for example when a modal dialog is shown,<br>            // cancel all ongoing events<br>            .on('touchcancel MSPointerCancel pointercancel', cancelAll)<br>        // scrolling the window indicates intention of the user<br>        // to scroll, not tap or swipe, so cancel all ongoing events<br>        $(window).on('scroll', cancelAll)<br>    })<br>    ;['swipe', 'swipeLeft', 'swipeRight', 'swipeUp', 'swipeDown',<br>        'doubleTap', 'tap', 'singleTap', 'longTap'].forEach(function(eventName){<br>            $.fn[eventName] = function(callback){ return this.on(eventName, callback) }<br>        })<br>})(Zepto)</span>

詳細分析:

#根據zepto原始碼,我們很清楚地知道tap事件是透過綁定在document上的touch事件來模擬的。所以使用者在點擊tap事件(touchstart、touchend)時需要冒泡到document上才會觸發。然而使用者在touchstart和touchend時會觸發click事件,但此時click事件處於延遲300ms,如果在這300ms之內tap事件已經完成,將上層元素刪除或隱藏。在300ms到來之際,根據click事件的原則(當click事件的元素處於最上層時會處於click事件,所以有的時候錯誤的z-index的設定導致無法觸發click事件),下層事件被執行,出現穿透現象。讓下層是input元素,即使沒有綁定click事件,由於其預設聚焦彈出鍵盤,穿透現象尤其嚴重。

解決方案:

1、github上有個fastclick插件,用來規避click事件的延時執行。引入文件後添加如下程式碼,並用click取代可能會導致穿透的tap事件元素。

$(function(){ new FastClick(document.body); })

2、監聽touchend事件來取代tap,或touchstart,並阻止冒泡

$("#close").on("touchend",function(e){
$("#alertBox").hide();
e.preventDefault();
});

3、使用css3的pointer-events : true   和 pointer-events : none交替使用對下層元素設置,阻止觸發click事件。

4、延時消失上層元素,使得無法觸發下層click事件,盡量在延時350ms以上(本人在ios9.2上微信6.3.15上測試過)。不過這樣稍微有些體驗不好,我們可以使用css3過度來改善體驗。

setTimeout(function(){ $(#alertBox).hide(); } , 350 );

5、終極方案:用click取代所有tap。由於click的延時,導致體驗問題,最好加上fastclick插件。

以下是我寫了一個簡單的範例:可以用手機存取http://property.pingan.com/app/test/jltest/tap-through.html?a= 1

透過例子,我們可以很明顯的看到事件穿透後底層的button有按下的效果。在頻繁的測試過程中,由於微信會快取頁面導致無法看到即時修改的內容,我們可以透過為url增加一些沒用的參數如a=1,這樣瀏覽器就會重新載入。

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
 <title>test-tap-through</title>
 <script src="js/zepto.min.js" charset="utf-8"></script>
 <style media="screen">
 body{
 margin: 0;
 padding: 0;
 }
 .test1,.test2{
 position: relative;
 }
 .button{
 width: 90%;
 height: 75px;
 background-color: #00ffff;
 margin: 5%;
 line-height: 75px;
 text-align: center;
 font-size: 40px;
 }
 .box{
 position: absolute;
 top:0;
 left: 0;
 width: 50%;
 height: 200px;
 background-color: #ff00ff;
 margin: 5%;
 line-height: 100px;
 text-align: center;
 font-size: 40px;
 z-index: 100;
 }
 </style>
</head>
<body>
 <p>
 <input type="button" id="button1" value="button1">
 <input type="button" id="button2" value="button2">
 <p id="box1" style="display:none">box1</p>
 <p id="box2" style="display:none">box2</p>
 </p>
 <p>
 <input type="button" id="button3" value="button3">
 <input type="button" id="button4" value="button4">
 <p id="box3" style="display:none">box3</p>
 <p id="box4" style="display:none">box4</p>
 </p>
</body>
<script type="text/javascript">
 $("#button1").click(function(){
 $("#box2").hide();
 $("#box1").show();
 });
 $("#button2").click(function(){
 $("#box1").hide();
 $("#box2").show();
 });
 $("#box2").tap(function(){
 $("#box2").hide();
 });
 $("#box1").tap(function(){
 $("#box1").hide();
 });
 $("#button3").click(function(){
 $("#box4").hide();
 $("#box3").show();
 });
 $("#button4").click(function(){
 $("#box3").hide();
 $("#box4").show();
 });
 $("#box3").tap(function(){
 setTimeout(function(){$("#box3").hide();},350);
 
 });
 $("#box4").tap(function(){
 setTimeout(function(){$("#box4").hide();},350);
 
 });
</script>
</html>

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

如何存取JS的物件屬性與方法

如何使用來源生css3實作圓環加載進度條

以上是如何使用Zepto tap事件的穿透與點透(附程式碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
事件 ID 4660:已删除对象 [修复]事件 ID 4660:已删除对象 [修复]Jul 03, 2023 am 08:13 AM

我们的一些读者遇到了事件ID4660。他们通常不确定该怎么做,所以我们在本指南中解释。删除对象时通常会记录事件ID4660,因此我们还将探索一些实用的方法在您的计算机上修复它。什么是事件ID4660?事件ID4660与活动目录中的对象相关,将由以下任一因素触发:对象删除–每当从ActiveDirectory中删除对象时,都会记录事件ID为4660的安全事件。手动更改–当用户或管理员手动更改对象的权限时,可能会生成事件ID4660。更改权限设置、修改访问级别或添加或删除人员或组时,可能会发生这种情

在iPhone锁屏上获取即将到来的日历事件在iPhone锁屏上获取即将到来的日历事件Dec 01, 2023 pm 02:21 PM

在运行iOS16或更高版本的iPhone上,您可以直接在锁定屏幕上显示即将到来的日历事件。继续阅读以了解它是如何完成的。由于表盘复杂功能,许多AppleWatch用户习惯于能够看一眼手腕来查看下一个即将到来的日历事件。随着iOS16和锁定屏幕小部件的出现,您可以直接在iPhone上查看相同的日历事件信息,甚至无需解锁设备。日历锁定屏幕小组件有两种风格,允许您跟踪下一个即将发生的事件的时间,或使用更大的小组件来显示事件名称及其时间。若要开始添加小组件,请使用面容ID或触控ID解锁iPhone,长按

在JavaScript中,"oninput"事件的用途是什么?在JavaScript中,"oninput"事件的用途是什么?Aug 26, 2023 pm 03:17 PM

当在输入框中添加值时,就会发生oninput事件。您可以尝试运行以下代码来了解如何在JavaScript中实现oninput事件-示例<!DOCTYPEhtml><html>&nbsp;&nbsp;<body>&nbsp;&nbsp;&nbsp;<p>Writebelow:</p>&nbsp;&nbsp;&nbsp;<inputtype="text"

如何在PHP项目中实现日历功能和事件提醒?如何在PHP项目中实现日历功能和事件提醒?Nov 02, 2023 pm 12:48 PM

如何在PHP项目中实现日历功能和事件提醒?在开发Web应用程序时,日历功能和事件提醒是常见的需求之一。无论是个人日程管理、团队协作,还是在线活动安排,日历功能都可以提供便捷的时间管理和事务安排。在PHP项目中实现日历功能和事件提醒可以通过以下步骤来完成。数据库设计首先,需要设计数据库表来存储日历事件的相关信息。一个简单的设计可以包含以下字段:id:事件的唯一

jQuery中如何实现select元素的改变事件绑定jQuery中如何实现select元素的改变事件绑定Feb 23, 2024 pm 01:12 PM

jQuery是一个流行的JavaScript库,可以用来简化DOM操作、事件处理、动画效果等。在web开发中,经常会遇到需要对select元素进行改变事件绑定的情况。本文将介绍如何使用jQuery实现对select元素改变事件的绑定,并提供具体的代码示例。首先,我们需要使用标签来创建一个包含选项的下拉菜单:

Vue文档中的input框绑定事件详解Vue文档中的input框绑定事件详解Jun 21, 2023 am 08:12 AM

Vue.js是一种轻量级的JavaScript框架,具有易用、高效和灵活的特点,是目前广受欢迎的前端框架之一。在Vue.js中,input框绑定事件是一个十分常见的需求,本文将详细介绍Vue文档中的input框绑定事件。一、基础概念在Vue.js中,input框绑定事件指的是将输入框的值绑定到Vue实例的数据对象中,从而实现输入和响应的双向绑定。在Vue.j

jquery中常用的事件有哪些jquery中常用的事件有哪些Jan 03, 2023 pm 06:13 PM

jquery中常用的事件有:1、window事件;2、鼠标事件,是当用户在文档上面移动或单击鼠标时而产生的事件,包括鼠标单击、移入事件、移出事件等;3、键盘事件,是用户每次按下或者释放键盘上的按键时都会产生事件,包括按下按键事件、释放按键按键等;4、表单事件,例如当元素获得焦点时会触发focus()事件,失去焦点时会触发blur()事件,表单提交时会触发submit()事件。

深入研究jQuery中的关闭按钮事件深入研究jQuery中的关闭按钮事件Feb 24, 2024 pm 05:09 PM

深入理解jQuery中的关闭按钮事件在前端开发过程中,经常会遇到需要实现关闭按钮功能的情况,比如关闭弹窗、关闭提示框等。而在使用jQuery这个流行的JavaScript库时,实现关闭按钮事件也变得异常简单和方便。本文将深入探讨如何利用jQuery来实现关闭按钮事件,并提供具体的代码示例,帮助读者更好地理解和掌握这个技术。首先,我们需要了解在HTML中如何定

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )專業的PHP整合開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

這個專案正在遷移到osdn.net/projects/mingw的過程中,你可以繼續在那裡關注我們。 MinGW:GNU編譯器集合(GCC)的本機Windows移植版本,可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔;包括對MSVC執行時間的擴展,以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境