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

資訊專欄INFORMATION COLUMN

無聊想實(shí)現(xiàn)一下vue的自定義事件，粗糙的效果，用來拋磚引玉

darkerXi / 523人閱讀

摘要：原理首先要理解的自定義事件。這樣子就好了直接預(yù)覽下效果，能正常調(diào)用，還行還行醬紫之后會不會好一點(diǎn)，寫的不好道友們輕噴

背景

是這樣子滴，有時(shí)候我們用vue框架的時(shí)候，要用到很多手勢，像tap、doubletap、longtap......，當(dāng)然現(xiàn)在網(wǎng)上有很多手勢褲什么的，拿來改一下也是可以實(shí)現(xiàn)自己想要的效果滴，我是希望用vue 的時(shí)候類似于

{{msg}}－－－長按（longtap）點(diǎn)擊（tap）事件

這么用那好了，左思右想寫了一個(gè)小栗子，用來拋磚引玉。

原理

首先要理解js的自定義事件。Events 可以使用 Event構(gòu)造函數(shù) 創(chuàng)建如下:

// 事件對象
var event = new Event("build");

// 監(jiān)聽事件
elem.addEventListener("build", function (e) { ... }, false);

// 分發(fā)事件
elem.dispatchEvent(event);

當(dāng)然可以，添加自定義數(shù)據(jù)

var event = new CustomEvent("build", { "detail": elem.dataset.time });

好了，看了上面的原理之后直接上源碼，簡單封裝一個(gè)tap和longtap事件，

實(shí)現(xiàn)

先寫個(gè)打架都熟悉的vue的小代碼




    
        
        
        
        
        
        
    

    
        

            
{{msg}}－－－長按（longtap）點(diǎn)擊（tap）事件

            
            
{{msg}}－－－點(diǎn)擊（tap）事件

            
            
{{msg}}－－－長按（longtap）事件

            
            
{{msg}}－－－touchstart事件

            
            
{{msg}}－－－沒有事件跟風(fēng)用～～～

上面引入了一個(gè)tap.js， 下面我們就去補(bǔ)全這個(gè)js就好了。

tap.js

(function() {
    var TOUCHSTART, TOUCHMOVE, TOUCHEND;
    if(typeof(window.ontouchstart) != "undefined") {
        TOUCHSTART = "touchstart";
        TOUCHEND = "touchend";
        TOUCHMOVE = "touchmove";

    } else if(typeof(window.onmspointerdown) != "undefined") {
        TOUCHSTART = "MSPointerDown";
        TOUCHEND = "MSPointerUp";
        TOUCHMOVE = "MSPointerMove";
    } else {
        TOUCHSTART = "mousedown";
        TOUCHEND = "mouseup";
        TOUCHMOVE = "mousemove";
    }

    function tap(node) {
        var x, y, startTime = 0,
            endTime = 0,
            in_dis = false;
        node.oncontextmenu = function() {
            return false;
        }
        node.addEventListener(TOUCHSTART, function(e) {
            x = e.touches[0].pageX;
            y = e.touches[0].pageY;
            startTime = (new Date()).getTime();
        });

        node.addEventListener(TOUCHEND, function(e) {
            e.stopPropagation();
            e.preventDefault();
            var curx = e.changedTouches[0].pageX;
            var cury = e.changedTouches[0].pageY;
            if(Math.abs(curx - x) < 6 && Math.abs(cury - y) < 6) {
                in_dis = true;
            } else {
                in_dis = false;
            }
            endTime = (new Date()).getTime();
            if(endTime - startTime > 300 && in_dis) {
                e.target.dispatchEvent(new CustomEvent("longtap", {
                    "detail": e
                }));
            } else {
                e.target.dispatchEvent(new CustomEvent("tap", {
                    "detail": e
                }));
            }
        });
    }

    tap(document);
})();

也先不管了 直接掛載到document上面（人懶～～～～）。
這樣子就好了 直接預(yù)覽下效果，

能正常調(diào)用aaa(), bbb()，還行還行～～～！！！

醬紫之后會不會好一點(diǎn)？？？？，寫的不好～～～道友們輕噴～～～～

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/91173.html

相關(guān)文章

  • 深入理解js

    摘要：詳解十大常用設(shè)計(jì)模式力薦深度好文深入理解大設(shè)計(jì)模式收集各種疑難雜癥的問題集錦關(guān)于，工作和學(xué)習(xí)過程中遇到過許多問題，也解答過許多別人的問題。介紹了的內(nèi)存管理。 延遲加載 (Lazyload) 三種實(shí)現(xiàn)方式 延遲加載也稱為惰性加載，即在長網(wǎng)頁中延遲加載圖像。用戶滾動到它們之前，視口外的圖像不會加載。本文詳細(xì)介紹了三種延遲加載的實(shí)現(xiàn)方式。 詳解 Javascript十大常用設(shè)計(jì)模式 力薦~ ...

    caikeal 評論0 收藏0

  • 前端窩 - 收藏集 - 掘金

    摘要：毫無疑問，設(shè)計(jì)模式于己于他人于系統(tǒng)都是多贏的設(shè)計(jì)模式使代碼編寫真正工程化設(shè)計(jì)模小書前端掘金這是一本關(guān)于的小書。 JavaScript 常見設(shè)計(jì)模式解析 - 掘金設(shè)計(jì)模式（Design pattern）是一套被反復(fù)使用、多數(shù)人知曉的、經(jīng)過分類編目的、代碼設(shè)計(jì)經(jīng)驗(yàn)的總結(jié)。使用設(shè)計(jì)模式是為了可重用代碼、讓代碼更容易被他人理解、保證代碼可靠性。毫無疑問，設(shè)計(jì)模式于己于他人于系統(tǒng)都是多贏的；設(shè)計(jì)...

    李文鵬 評論0 收藏0

  • 深刻理解Vue中的組件

    摘要：還可以在某個(gè)實(shí)例中注冊只有自己能使用的組件。當(dāng)在一個(gè)組件中，使用了其他自定義組件時(shí)，就會利用子組件的屬性和事件來和父組件進(jìn)行數(shù)據(jù)交流。正確的做法是，在父組件中綁定屬性值時(shí)，加上修飾符。 2019-06-20更新: Vue2.6已經(jīng)更新了關(guān)于內(nèi)容插槽和作用域插槽的API和用法，為了不誤導(dǎo)大家，我把插槽的內(nèi)容刪除了。詳情請看官網(wǎng) 2018-07-19更新: 更新作用域插槽的屬性: sco...

    mdluo 評論0 收藏0

  • vue2.0開發(fā)聊天程序（三）組件的通信

    摘要：我在中寫了這段代碼在組件被創(chuàng)建時(shí)候?qū)?zhí)行此函數(shù)相當(dāng)于進(jìn)入頁面的自執(zhí)行使用方法監(jiān)聽屬性并執(zhí)行一個(gè)回調(diào)函數(shù)按道理在元素被創(chuàng)建的時(shí)候，會將監(jiān)聽到的值賦給并且打印。 天地不仁以萬物為芻狗，宇宙無義視眾生如螻蟻　　　　　　　　　　　　　　　　　　——蕭鼎和我 上一節(jié)列出了５個(gè)關(guān)鍵點(diǎn)，第一個(gè)路由已經(jīng)解決了，接下來解決第二個(gè)問題： 組件的通信問題 一、組件的關(guān)系 組件之間的關(guān)系無非就是兩種父子關(guān)系...

    ddongjian0000 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<