成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

darkerXi / 526人閱讀

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

背景

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

{{msg}}－－－長按（longtap）點擊（tap）事件

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

原理

首先要理解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 });

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

實現(xiàn)

先寫個打架都熟悉的vue的小代碼




    
        
        
        
        
        
        
    

    
        

            
{{msg}}－－－長按（longtap）點擊（tap）事件

            
            
{{msg}}－－－點擊（tap）事件

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

            
            
{{msg}}－－－touchstart事件

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

上面引入了一個tap.js， 下面我們就去補全這個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()，還行還行～～～?。?！

醬紫之后會不會好一點？？？？，寫的不好～～～道友們輕噴～～～～

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

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

相關(guān)文章

  • 深入理解js

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

    caikeal 評論0 收藏0

  • 前端窩 - 收藏集 - 掘金

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

    李文鵬 評論0 收藏0

  • 深刻理解Vue中的組件

    摘要：還可以在某個實例中注冊只有自己能使用的組件。當(dāng)在一個組件中，使用了其他自定義組件時，就會利用子組件的屬性和事件來和父組件進(jìn)行數(shù)據(jù)交流。正確的做法是，在父組件中綁定屬性值時，加上修飾符。 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)建時候?qū)?zhí)行此函數(shù)相當(dāng)于進(jìn)入頁面的自執(zhí)行使用方法監(jiān)聽屬性并執(zhí)行一個回調(diào)函數(shù)按道理在元素被創(chuàng)建的時候，會將監(jiān)聽到的值賦給并且打印。 天地不仁以萬物為芻狗，宇宙無義視眾生如螻蟻　　　　　　　　　　　　　　　　　　——蕭鼎和我 上一節(jié)列出了５個關(guān)鍵點，第一個路由已經(jīng)解決了，接下來解決第二個問題： 組件的通信問題 一、組件的關(guān)系 組件之間的關(guān)系無非就是兩種父子關(guān)系...

    ddongjian0000 評論0 收藏0

發(fā)表評論

0條評論

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