zepto.js中tap事件阻止冒泡的實(shí)現(xiàn)方法
本文實(shí)例講述了zepto.js中tap事件阻止冒泡的實(shí)現(xiàn)方法。分享給大家供大家參考。具體如下：
最近在弄一個(gè)手機(jī)版的網(wǎng)站，本來(lái)想用jQuery Mobile，但文件太大了，所以用了zepto.js
由于移動(dòng)網(wǎng)頁(yè)中使用click事件會(huì)有延遲，所以就用上了zepto.js中的tap事件。
使用click事件可以使用stopPropagation來(lái)阻止冒泡，但tap使用該方法無(wú)效
現(xiàn)在我需要實(shí)現(xiàn)這樣一個(gè)效果：點(diǎn)擊a.btn這個(gè)按鈕，然后顯示div.panel，當(dāng)我點(diǎn)擊非div.panel時(shí)隱藏div.panel
$("a.btn").on("tap",function(e){
e.stopPropagation();//該方法不起作用
$("div.panel").show();
});
$(document).on("tap",function(e){
$("div.panel").hide();
});
通過(guò)調(diào)試工具，得到e這個(gè)對(duì)象中有一個(gè)target屬性，于是可以通過(guò)該屬性來(lái)實(shí)現(xiàn)所需要的效果：
$("a.btn").on("tap",function(){
$("div.panel").show();
});
$(document).on("tap",function(e){
if(!$(e.target).hasClass("btn")){
$("div.panel").hide();
}
});
這樣算是解決了
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
Layui表格行內(nèi)動(dòng)態(tài)編輯數(shù)據(jù)
本文主要介紹經(jīng)典前端框架 layui 中的動(dòng)態(tài)表格數(shù)據(jù)操作，結(jié)合 JQuery 動(dòng)態(tài)編輯單元格中的數(shù)據(jù)，具有一定的參考價(jià)值，感興趣的可以了解一下2021-08-08
本篇文章主要給大家講述了JavaScript體驗(yàn)異步更好的解決辦法，有這方面需要的朋友跟著學(xué)習(xí)參考下吧。2018-01-01
基于rem的移動(dòng)端響應(yīng)式適配方案(詳解)
下面小編就為大家?guī)?lái)一篇基于rem的移動(dòng)端響應(yīng)式適配方案(詳解)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
鼠標(biāo)移到div,浮層顯示明細(xì),彈出層與div的上邊距左邊距重合(示例代碼)
這篇文章主要介紹了鼠標(biāo)移到div,浮層顯示明細(xì),彈出層與div的上邊距左邊距重合的實(shí)例代碼。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-12-12
這篇文章主要介紹了JavaScript中消除閉包的一般方法介紹,本文直接給出了操作示例,需要的朋友可以參考下2015-03-03
javascript 瀏覽器檢測(cè)代碼精簡(jiǎn)版
javascript檢測(cè)瀏覽器精簡(jiǎn)版，需要的朋友可以參考下。2010-03-03
詳解ES6 Fetch API HTTP請(qǐng)求實(shí)用指南
本次將介紹如何使用Fetch API（ES6 +）對(duì)REST API的 HTTP請(qǐng)求，還有一些示例提供給大家便于大家理解。具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-11-11
JS獲取鼠標(biāo)坐標(biāo)位置實(shí)例分析
這篇文章主要介紹了JS獲取鼠標(biāo)坐標(biāo)位置的方法,結(jié)合實(shí)例形式分析了JavaScript常見(jiàn)的獲取鼠標(biāo)頁(yè)面、屏幕等坐標(biāo)位置的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-01-01
前端防止用戶重復(fù)提交js實(shí)現(xiàn)代碼示例
這篇文章主要給大家介紹了關(guān)于前端防止用戶重復(fù)提交js實(shí)現(xiàn)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起看看吧2018-09-09
在Js中有一些比較冷門但是非常好用的方法，我在這里稱之為高級(jí)方法，這些方法沒(méi)有被廣泛使用或多或少是因?yàn)榇嬖谝恍┘嫒菪缘膯?wèn)題，不是所有的瀏覽器都讀得懂的，這篇文章主要就是對(duì)這些方法做一個(gè)總結(jié)，讓我們一起來(lái)看一下吧2023-06-06