国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

點(diǎn)透問(wèn)題及解決

番茄西紅柿 / 1244人閱讀

摘要：?jiǎn)栴}封裝的事件由和實(shí)現(xiàn)，事件在端無(wú)效使用中事件在中該版本的點(diǎn)透問(wèn)題已經(jīng)解決可以放心使用，但是端仍然無(wú)效。

一、問(wèn)題描述

實(shí)際學(xué)習(xí)與工作中可能會(huì)有這樣的需求：在移動(dòng)web中給有重疊的兩個(gè)元素都添加了點(diǎn)擊事件，當(dāng)觸發(fā)上方的元素的時(shí)候同時(shí)也會(huì)透過(guò)該元素觸發(fā)下面的元素。這就是點(diǎn)透，然而這并不是我想要的效果。

二、例子

下面通過(guò)多種方式來(lái)模擬感受點(diǎn)透：

<div class="tap">tap
<div class="click">click

1、使用原生js

直接給兩個(gè)盒子綁定點(diǎn)擊事件：

    var tap = document.querySelector(.tap);
    var click = document.querySelector(.click); 
    //一、為tap添加touch事件  touch事件只是針對(duì)移動(dòng)端，pc端無(wú)效
    tap.addEventListener(touchstart,function(e) {
        tap.style.visibility = "hidden";
    });
    click.addEventListener(click,function(e) {
        click.style.backgroundColor = "blue";
    })

在移動(dòng)端如下效果：僅僅點(diǎn)擊tap盒子，tap盒子隱藏，click盒子也被觸發(fā)改變了背景顏色。

一、問(wèn)題描述

實(shí)際學(xué)習(xí)與工作中可能會(huì)有這樣的需求：在移動(dòng)web中給有重疊的兩個(gè)元素都添加了點(diǎn)擊事件，當(dāng)觸發(fā)上方的元素的時(shí)候同時(shí)也會(huì)透過(guò)該元素觸發(fā)下面的元素。這就是點(diǎn)透，然而這并不是我想要的效果。

二、例子

下面通過(guò)多種方式來(lái)模擬感受點(diǎn)透：

<div class="tap">tap
<div class="click">click
1、使用原生js

直接給兩個(gè)盒子綁定點(diǎn)擊事件：

    var tap = document.querySelector(.tap);
    var click = document.querySelector(.click); 
    //一、為tap添加touch事件  touch事件只是針對(duì)移動(dòng)端，pc端無(wú)效
    tap.addEventListener(touchstart,function(e) {
        tap.style.visibility = "hidden";
    });
    click.addEventListener(click,function(e) {
        click.style.backgroundColor = "blue";
    })

在移動(dòng)端如下效果：僅僅點(diǎn)擊tap盒子，tap盒子隱藏，click盒子也被觸發(fā)改變了背景顏色。

問(wèn)題1：點(diǎn)透

問(wèn)題2：touch在PC端無(wú)效

問(wèn)題3：click事件在移動(dòng)端有延遲約300ms的問(wèn)題（詳細(xì)見(jiàn)移動(dòng)端click延遲和tap事件）

2、使用自己封裝的tap事件

封裝的tap事件代碼詳見(jiàn)上一篇：移動(dòng)端click延遲和tap事件

idcast.tap(tap,function(e){
            tap.style.visibility = "hidden";
        })
        idcast.tap(click,function(e) {
            click.style.backgroundColor = "blue";
        })

結(jié)果：移動(dòng)端沒(méi)有出現(xiàn)點(diǎn)透，但是PC端無(wú)效。

問(wèn)題1：封裝的tap事件由touchstart和touchend實(shí)現(xiàn)，touch事件在pc端無(wú)效

3、使用zepto
$(.tap).on("tap",function() {
            $(this).hide();//zepto中tap事件在touch.js中
        });
        $(.click).on("click",function() {
            $(this).css("backgroundColor","blue");
        })

該版本zepto的點(diǎn)透問(wèn)題已經(jīng)解決可以放心使用，但是PC端仍然無(wú)效。

三、解決

綜合上述：web想同時(shí)移動(dòng)端和PC端呈現(xiàn)，又要解決點(diǎn)透問(wèn)題，可以直接使用一個(gè)fastclick.js插件：fastclick

如下的使用：可以完美解決以上三者問(wèn)題

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");
        })

當(dāng)然不是拿來(lái)主義，而是充分利用各種工具以提高自己學(xué)習(xí)和工作的效率。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/1400.html

相關(guān)文章

  • 移動(dòng)端-點(diǎn)透問(wèn)題 巧妙解決

    摘要：移動(dòng)端經(jīng)常出現(xiàn)點(diǎn)透，至于怎么出現(xiàn)的請(qǐng)大家去看一下實(shí)現(xiàn)的源碼。點(diǎn)透是什么你可能碰到過(guò)在列表頁(yè)面上創(chuàng)建一個(gè)彈出層，彈出層有個(gè)關(guān)閉的按鈕，你點(diǎn)了這個(gè)按鈕關(guān)閉彈出層后后，這個(gè)按鈕正下方的內(nèi)容也會(huì)執(zhí)行點(diǎn)擊事件或打開(kāi)鏈接。這個(gè)被定義為這是一個(gè)點(diǎn)透現(xiàn)象。 移動(dòng)端經(jīng)常出現(xiàn)點(diǎn)透，至于怎么出現(xiàn)的請(qǐng)大家去看一下zepto實(shí)現(xiàn)tap的源碼。 1、點(diǎn)透是什么 你可能碰到過(guò)在列表頁(yè)面上創(chuàng)建一個(gè)彈出層，彈出層有個(gè)關(guān)...

    MockingBird 評(píng)論0 收藏0

  • 移動(dòng)端-點(diǎn)透的解決方法

    摘要：移動(dòng)端經(jīng)常出現(xiàn)點(diǎn)透，至于怎么出現(xiàn)的請(qǐng)大家去看一下實(shí)現(xiàn)的源碼。點(diǎn)透是什么你可能碰到過(guò)在列表頁(yè)面上創(chuàng)建一個(gè)彈出層，彈出層有個(gè)關(guān)閉的按鈕，你點(diǎn)了這個(gè)按鈕關(guān)閉彈出層后后，這個(gè)按鈕正下方的內(nèi)容也會(huì)執(zhí)行點(diǎn)擊事件或打開(kāi)鏈接。這個(gè)被定義為這是一個(gè)點(diǎn)透現(xiàn)象。 移動(dòng)端經(jīng)常出現(xiàn)點(diǎn)透，至于怎么出現(xiàn)的請(qǐng)大家去看一下zepto實(shí)現(xiàn)tap的源碼。 1、點(diǎn)透是什么 你可能碰到過(guò)在列表頁(yè)面上創(chuàng)建一個(gè)彈出層，彈出層有個(gè)關(guān)...

    cpupro 評(píng)論0 收藏0

  • “click延時(shí)”是怎么來(lái)的與自定義tap事件解決“點(diǎn)透”

    摘要：早期版本的的就是如此處理的，自定義事件在中觸發(fā)，解決單擊延時(shí)的問(wèn)題。給按鈕綁定事件事件執(zhí)行自定義事件觸發(fā)上的事件當(dāng)然實(shí)際中肯定要放在其他的事件回調(diào)中，不然沒(méi)辦法響應(yīng)用戶操作。 click延時(shí) 在移動(dòng)設(shè)備上按下手指單擊，按先后順序，依次會(huì)發(fā)生touchstart->-touchmove（如果有的話）>touchend->mousedown->mousemove（如果有的話）->mouse...

    kid143 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<