js鼠標事件解析——如何用js實現一個拖動但是不觸發其點擊事件

Tony 發布于2019-08-26 11:49 / 1753人閱讀

摘要：前言這個是我在做一個的的時候出現的一個問題吧，就是想要他實現拖動的葉子節點，但是的話，不觸發他的點擊事件。這時候，我就想到一個好方法，就是設計監聽其父組件的事件就可以了，反正都會冒泡的。

前言

這個是我在做一個d3的demo的時候出現的一個問題吧，就是想要他實現拖動d3的葉子節點，但是的話，不觸發他的點擊事件。

在這里，我想過以下兩種種方案：

設計監聽mousedown，mouseup的計時器

設計監聽mousedown，mouseup的位置

但是很快就實踐了一下，然后測試不同的電腦：

設定計時器的話，會導致不知道設多長時間，一開始設定100ms，但是發現，有些鼠標點擊速度不夠，但是設置超過100ms的話，點擊快的已經拉動完了，這樣的體驗感很差。

接下來就只能設計一下監聽位置了，這時候，又有一個問題，d3當中綁定節點的事件，是沒有接口給你拿到他的事件對象的。這時候，我就想到一個好方法，就是設計監聽其父組件的事件就可以了，反正都會冒泡的。接下來就實踐一下吧。

js當中的鼠標事件

在這里，我就介紹一些常用的吧，更多的，可以看看js權威指南或者js高級教程

click: 用戶單擊主鼠標鍵（一般是左邊）或者按下回車鍵時觸發

dblclick: 用戶雙擊主鼠標鍵（一般是左邊）或者按下回車鍵時觸發

mousedown: 用戶按下任意鼠標按鈕觸發，鍵盤不能觸發

mousemove: 鼠標在元素內移動就不斷的觸發，鍵盤不能觸發

mouseup: 用戶松開鼠標鍵時候觸發，鍵盤不能觸發

然后鼠標主鍵點擊觸發的事件依次是

mousedown

mouseup

click

實現方法





    
    
    
    Document

// 先編寫一個跨瀏覽器綁定事件的對象吧
var EventUtil = {
    // 添加綁定事件
    addHandle: function(element, type, handler) {
        if(element.addEventListener) {
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {
            element.attachEvent("on" + type, handler);
        } else {
            element["on" + type] = handler;
        }
    },
    // 移除綁定事件
    removeHandler: function(element, type, handler) {
        if(element.removeEventListener) {
            element.removeEventListener(type, handler, false);
        } else if (element.detachEvent) {
            element.detachEvent("on" + type, handler);
        } else {
            element["on" + type] = null;
        }
    }
    
}

計時器實現方法

    var timer,  // 計時器
        toClick;    // 判斷是否跳轉
    
    EventUtil.addHandle(document.getElementById("child"), "mousedown", function () {
        toClick = true;
        timer = setTimeout("toClick = false",100);
    })
    EventUtil.addHandle(document.getElementById("child"), "mouseup",function(node){
        clearTimeout(timer);
        if(toClick){
            console.log("click")
        }
    })

計算位置實現方法

    var beginX, // 起始位置
        beginY,
        endX,   // 結束位置
        endY;

    // 計算起始位置和結束位置
    document.getElementById("father").addEventListener("mousedown", function (e) {
        beginX = e.clientX;
        beginY = e.clientY;
    },false)
    document.getElementById("father").addEventListener("mouseup", function (e) {
        endX = e.clientX;
        endY = e.clientY;
    },false)

    // 判斷是否要跳轉
    EventUtil.addHandle(document.getElementById("child"), "click", function(){
        if(!isdrag(beginX, beginY, endX, endY)){
            console.log("click");
        }
    })

    // 判斷是否拖動了，這里我設置了1px，大家可以根據自己來進行修改吧
    function isdrag(x1, y1, x2 , y2) {
        if(Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2)) <= 1) {
            return false;
        }
        return true;
    }

總結

其實，覺得這兩種方法可以配合使用更好，因為可能有些用戶拉回到了原來的位置，大家可以自行多發揮，而且代碼比較短和簡單，我就不進行多的封裝了，大家自行了解一下就行，有什么疑問可以留言。

GPU云服務器云服務器不觸發鼠標按下事件 js觸發事件 js取消觸發事件 js 輸入時觸發事件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107629.html

原生js練習題---第六課

摘要：自定義多級右鍵菜單實現效果自定義多級右鍵菜單第五課第六題中已經通過事件實現了一級右鍵菜單，所以這題只要在上面再添加事件喚出子菜單即可。 0x1完美拖拽實現效果：6-01完美拖動這里沒有使用h5的拖動，畢竟原題也是考察借助鼠標事件實現自定義的拖動，所以就借鑒了《js高級程序設計》里的自定義拖動自己封裝了個拖動api，當然由于做這個系列題目使用的都是es5的語法，所以IE8往下就兼容不...

tinyq 2019-08-19 18:17 評論0 收藏0
如何用原生js來寫一個swiper滑塊插件（上）原理

嗨~ 這里是芝麻，今天我們一塊來做一個滑塊插件。那么啥是滑塊插件呢？滑塊插件能干嘛呢？請看下圖： showImg(https://user-gold-cdn.xitu.io/2019/5/27/16af8370362d18e4); 是不是有點印象了，沒錯，他的最基本的用法就是左右滑動，插件使用者只需要寫幾行簡單的html和js即可實現一個簡單滑動效果，不過你完全可以組合各種元素來適應不同的場景...

Dionysus_go 2019-05-27 17:41 評論0 收藏0
【詳】JS實現拖拽元素互換位置

摘要：只有在可放置的元素上面松開鼠標才會觸發事件，所以這個是被放置的節點。寫在前面的廢話大家好，我是練習js時長接近兩年半的個人練習生--李大雷算了，直接雞,你太美~ 應用場景很多時候，我們需要讓用戶來自定義自己想要的菜單順序，或者一些按鈕的排序，那么這個時候，怎么給用戶自定義順序呢？拖拽無疑是最簡單易懂的，因為玩過手機的都知道怎么拖動桌面的app來改變位置。那么要怎么做呢？最簡...

lentrue 2019-08-02 16:12 評論0 收藏0
【詳】JS實現拖拽元素互換位置

摘要：只有在可放置的元素上面松開鼠標才會觸發事件，所以這個是被放置的節點。寫在前面的廢話大家好，我是練習js時長接近兩年半的個人練習生--李大雷算了，直接雞,你太美~ 應用場景很多時候，我們需要讓用戶來自定義自己想要的菜單順序，或者一些按鈕的排序，那么這個時候，怎么給用戶自定義順序呢？拖拽無疑是最簡單易懂的，因為玩過手機的都知道怎么拖動桌面的app來改變位置。那么要怎么做呢？最簡...

AaronYuan 2019-08-23 16:48 評論0 收藏0
溫故js系列（10）-事件event

摘要：當用戶選擇文本框或中的一個或多個字符觸發。當文本框或內容改變且失去焦點后觸發。事件對象事件對象就是對象，通過處理函數傳遞。比如右擊文本框輸入區域，會彈出系統菜單點擊超鏈接會跳轉到指定頁面點擊提交按鈕會提交數據。前端學習：教程&開發模塊化/規范化/工程化/優化&工具/調試&值得關注的博客/Git&面試-前端資源匯總歡迎提issues斧正：Event JavaScript-事件even...

Freelander 2019-08-20 10:24 評論0 收藏0