資訊專欄INFORMATION COLUMN
摘要：前言這個是我在做一個的的時候出現(xiàn)的一個問題吧，就是想要他實現(xiàn)拖動的葉子節(jié)點，但是的話，不觸發(fā)他的點擊事件。這時候，我就想到一個好方法，就是設(shè)計監(jiān)聽其父組件的事件就可以了，反正都會冒泡的。
前言
這個是我在做一個d3的demo的時候出現(xiàn)的一個問題吧，就是想要他實現(xiàn)拖動d3的葉子節(jié)點，但是的話，不觸發(fā)他的點擊事件。
在這里，我想過以下兩種種方案：
設(shè)計監(jiān)聽mousedown，mouseup的計時器
設(shè)計監(jiān)聽mousedown，mouseup的位置
但是很快就實踐了一下，然后測試不同的電腦：
設(shè)定計時器的話，會導(dǎo)致不知道設(shè)多長時間，一開始設(shè)定100ms，但是發(fā)現(xiàn)，有些鼠標點擊速度不夠，但是設(shè)置超過100ms的話，點擊快的已經(jīng)拉動完了，這樣的體驗感很差。
接下來就只能設(shè)計一下監(jiān)聽位置了，這時候，又有一個問題，d3當中綁定節(jié)點的事件，是沒有接口給你拿到他的事件對象的。這時候，我就想到一個好方法，就是設(shè)計監(jiān)聽其父組件的事件就可以了，反正都會冒泡的。接下來就實踐一下吧。
js當中的鼠標事件在這里，我就介紹一些常用的吧，更多的，可以看看js權(quán)威指南或者js高級教程
click: 用戶單擊主鼠標鍵（一般是左邊）或者按下回車鍵時觸發(fā)
dblclick: 用戶雙擊主鼠標鍵（一般是左邊）或者按下回車鍵時觸發(fā)
mousedown: 用戶按下任意鼠標按鈕觸發(fā)，鍵盤不能觸發(fā)
mousemove: 鼠標在元素內(nèi)移動就不斷的觸發(fā)，鍵盤不能觸發(fā)
mouseup: 用戶松開鼠標鍵時候觸發(fā)，鍵盤不能觸發(fā)
然后鼠標主鍵點擊觸發(fā)的事件依次是
mousedown
mouseup
click
實現(xiàn)方法
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;
}
}
}
計時器實現(xiàn)方法
var timer, // 計時器
toClick; // 判斷是否跳轉(zhuǎn)
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")
}
})
計算位置實現(xiàn)方法
var beginX, // 起始位置
beginY,
endX, // 結(jié)束位置
endY;
// 計算起始位置和結(jié)束位置
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)
// 判斷是否要跳轉(zhuǎn)
EventUtil.addHandle(document.getElementById("child"), "click", function(){
if(!isdrag(beginX, beginY, endX, endY)){
console.log("click");
}
})
// 判斷是否拖動了，這里我設(shè)置了1px，大家可以根據(jù)自己來進行修改吧
function isdrag(x1, y1, x2 , y2) {
if(Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2)) <= 1) {
return false;
}
return true;
}
總結(jié)
其實，覺得這兩種方法可以配合使用更好，因為可能有些用戶拉回到了原來的位置，大家可以自行多發(fā)揮，而且代碼比較短和簡單，我就不進行多的封裝了，大家自行了解一下就行，有什么疑問可以留言。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/107629.html
摘要：自定義多級右鍵菜單實現(xiàn)效果自定義多級右鍵菜單第五課第六題中已經(jīng)通過事件實現(xiàn)了一級右鍵菜單，所以這題只要在上面再添加事件喚出子菜單即可。 0x1完美拖拽 實現(xiàn)效果：6-01完美拖動 這里沒有使用h5的拖動，畢竟原題也是考察借助鼠標事件實現(xiàn)自定義的拖動，所以就借鑒了《js高級程序設(shè)計》里的自定義拖動自己封裝了個拖動api，當然由于做這個系列題目使用的都是es5的語法，所以IE8往下就兼容不...
嗨~ 這里是芝麻，今天我們一塊來做一個滑塊插件。那么啥是滑塊插件呢？滑塊插件能干嘛呢？請看下圖： showImg(https://user-gold-cdn.xitu.io/2019/5/27/16af8370362d18e4); 是不是有點印象了，沒錯，他的最基本的用法就是左右滑動，插件使用者只需要寫幾行簡單的html和js即可實現(xiàn)一個簡單滑動效果，不過你完全可以組合各種元素來適應(yīng)不同的場景...
摘要：只有在可放置的元素上面松開鼠標才會觸發(fā)事件，所以這個是被放置的節(jié)點。 寫在前面的廢話 大家好，我是練習js時長接近兩年半的個人練習生--李大雷 算了，直接 雞,你太美~ 應(yīng)用場景 很多時候，我們需要讓用戶來自定義自己想要的菜單順序，或者一些按鈕的排序，那么這個時候，怎么給用戶自定義順序呢？拖拽無疑是最簡單易懂的，因為玩過手機的都知道怎么拖動桌面的app來改變位置。 那么要怎么做呢？最簡...
摘要：只有在可放置的元素上面松開鼠標才會觸發(fā)事件，所以這個是被放置的節(jié)點。 寫在前面的廢話 大家好，我是練習js時長接近兩年半的個人練習生--李大雷 算了，直接 雞,你太美~ 應(yīng)用場景 很多時候，我們需要讓用戶來自定義自己想要的菜單順序，或者一些按鈕的排序，那么這個時候，怎么給用戶自定義順序呢？拖拽無疑是最簡單易懂的，因為玩過手機的都知道怎么拖動桌面的app來改變位置。 那么要怎么做呢？最簡...
摘要：當用戶選擇文本框或中的一個或多個字符觸發(fā)。當文本框或內(nèi)容改變且失去焦點后觸發(fā)。事件對象事件對象就是對象，通過處理函數(shù)傳遞。比如右擊文本框輸入?yún)^(qū)域，會彈出系統(tǒng)菜單點擊超鏈接會跳轉(zhuǎn)到指定頁面點擊提交按鈕會提交數(shù)據(jù)。 前端學習：教程&開發(fā)模塊化/規(guī)范化/工程化/優(yōu)化&工具/調(diào)試&值得關(guān)注的博客/Git&面試-前端資源匯總 歡迎提issues斧正：Event JavaScript-事件even...
閱讀 3063·2021-11-18 10:02
閱讀 3332·2021-11-02 14:48
閱讀 3394·2019-08-30 13:52
閱讀 558·2019-08-29 17:10
閱讀 2086·2019-08-29 12:53
閱讀 1408·2019-08-29 12:53
閱讀 1030·2019-08-29 12:25
閱讀 2166·2019-08-29 12:17
