資訊專欄INFORMATION COLUMN
摘要：問題封裝的事件由和實現(xiàn)，事件在端無效使用中事件在中該版本的點透問題已經(jīng)解決可以放心使用，但是端仍然無效。
一、問題描述
實際學(xué)習(xí)與工作中可能會有這樣的需求：在移動web中給有重疊的兩個元素都添加了點擊事件，當觸發(fā)上方的元素的時候同時也會透過該元素觸發(fā)下面的元素。這就是點透，然而這并不是我想要的效果。
二、例子
下面通過多種方式來模擬感受點透：
<div class="tap">tap <div class="click">click
1、使用原生js
直接給兩個盒子綁定點擊事件：
var tap = document.querySelector(.tap);
var click = document.querySelector(.click);
//一、為tap添加touch事件 touch事件只是針對移動端，pc端無效
tap.addEventListener(touchstart,function(e) {
tap.style.visibility = "hidden";
});
click.addEventListener(click,function(e) {
click.style.backgroundColor = "blue";
})在移動端如下效果：僅僅點擊tap盒子，tap盒子隱藏，click盒子也被觸發(fā)改變了背景顏色。
實際學(xué)習(xí)與工作中可能會有這樣的需求：在移動web中給有重疊的兩個元素都添加了點擊事件，當觸發(fā)上方的元素的時候同時也會透過該元素觸發(fā)下面的元素。這就是點透，然而這并不是我想要的效果。
下面通過多種方式來模擬感受點透：
<div class="tap">tap <div class="click">click
直接給兩個盒子綁定點擊事件：
var tap = document.querySelector(.tap);
var click = document.querySelector(.click);
//一、為tap添加touch事件 touch事件只是針對移動端，pc端無效
tap.addEventListener(touchstart,function(e) {
tap.style.visibility = "hidden";
});
click.addEventListener(click,function(e) {
click.style.backgroundColor = "blue";
})在移動端如下效果：僅僅點擊tap盒子，tap盒子隱藏，click盒子也被觸發(fā)改變了背景顏色。
問題1：點透
問題2：touch在PC端無效
問題3：click事件在移動端有延遲約300ms的問題（詳細見移動端click延遲和tap事件）
封裝的tap事件代碼詳見上一篇：移動端click延遲和tap事件
idcast.tap(tap,function(e){
tap.style.visibility = "hidden";
})
idcast.tap(click,function(e) {
click.style.backgroundColor = "blue";
})結(jié)果：移動端沒有出現(xiàn)點透，但是PC端無效。
問題1：封裝的tap事件由touchstart和touchend實現(xiàn)，touch事件在pc端無效
$(.tap).on("tap",function() {
$(this).hide();//zepto中tap事件在touch.js中
});
$(.click).on("click",function() {
$(this).css("backgroundColor","blue");
})該版本zepto的點透問題已經(jīng)解決可以放心使用，但是PC端仍然無效。
綜合上述：web想同時移動端和PC端呈現(xiàn)，又要解決點透問題，可以直接使用一個fastclick.js插件：fastclick
如下的使用：可以完美解決以上三者問題
if (addEventListener in document) {
document.addEventListener(DOMContentLoaded, function() {
FastClick.attach(document.body);//給body綁定attach事件，是body中所有的元素都添加了attach事件
}, false);
}
tap.addEventListener(click,function() {
$(this).hide();
})
click.addEventListener(click,function() {
$(this).css("backgroundColor","blue");
})當然不是拿來主義，而是充分利用各種工具以提高自己學(xué)習(xí)和工作的效率。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/1400.html
摘要：移動端經(jīng)常出現(xiàn)點透，至于怎么出現(xiàn)的請大家去看一下實現(xiàn)的源碼。點透是什么你可能碰到過在列表頁面上創(chuàng)建一個彈出層，彈出層有個關(guān)閉的按鈕，你點了這個按鈕關(guān)閉彈出層后后，這個按鈕正下方的內(nèi)容也會執(zhí)行點擊事件或打開鏈接。這個被定義為這是一個點透現(xiàn)象。 移動端經(jīng)常出現(xiàn)點透，至于怎么出現(xiàn)的請大家去看一下zepto實現(xiàn)tap的源碼。 1、點透是什么 你可能碰到過在列表頁面上創(chuàng)建一個彈出層，彈出層有個關(guān)...
摘要：移動端經(jīng)常出現(xiàn)點透，至于怎么出現(xiàn)的請大家去看一下實現(xiàn)的源碼。點透是什么你可能碰到過在列表頁面上創(chuàng)建一個彈出層，彈出層有個關(guān)閉的按鈕，你點了這個按鈕關(guān)閉彈出層后后，這個按鈕正下方的內(nèi)容也會執(zhí)行點擊事件或打開鏈接。這個被定義為這是一個點透現(xiàn)象。 移動端經(jīng)常出現(xiàn)點透，至于怎么出現(xiàn)的請大家去看一下zepto實現(xiàn)tap的源碼。 1、點透是什么 你可能碰到過在列表頁面上創(chuàng)建一個彈出層，彈出層有個關(guān)...
摘要：早期版本的的就是如此處理的，自定義事件在中觸發(fā)，解決單擊延時的問題。給按鈕綁定事件事件執(zhí)行自定義事件觸發(fā)上的事件當然實際中肯定要放在其他的事件回調(diào)中，不然沒辦法響應(yīng)用戶操作。 click延時 在移動設(shè)備上按下手指單擊，按先后順序，依次會發(fā)生touchstart->-touchmove（如果有的話）>touchend->mousedown->mousemove（如果有的話）->mouse...
閱讀 713·2023-04-25 19:43
閱讀 3910·2021-11-30 14:52
閱讀 3784·2021-11-30 14:52
閱讀 3852·2021-11-29 11:00
閱讀 3783·2021-11-29 11:00
閱讀 3869·2021-11-29 11:00
閱讀 3558·2021-11-29 11:00
閱讀 6105·2021-11-29 11:00
