資訊專欄INFORMATION COLUMN
摘要：解決思路仔細比較拖拽與點擊事件，發現拖拽事件多了一個，我們可以從這個入手，點擊事件時與觸發時鼠標沒有移動，而拖拽時鼠標移動了一定的距離，具體體現在上。此時為，可以觸發點擊事件。
bug的原因：
一個完整的click事件是包含
mousedown,mouseup
兩個事件的，而拖拽一個元素時，包含下面三個事件：
mousedown,mousemove,mouseup,
所以我們在拖拽一個元素結束后，如果此元素上面綁定了點擊事件， 就會同時觸發元素的點擊事件，用戶體驗度不好。解決思路
仔細比較拖拽與點擊事件，發現拖拽事件多了一個mousemove，我們可以從這個mousemove入手，點擊事件 時mousedown與mouseup觸發時鼠標沒有移動，而拖拽時鼠標移動了一定的距離，具體體現在px上。解決辦法
可以設定一個clickFlag變量，通過clickFlag來確定mousedown與mouseup到底是觸發了點擊事件還是 拖動事件：
mousedown時記錄下鼠標的位置x1，y1，mouseup時記錄下鼠標的位置x2,y2，
判斷兩次位置 是否一樣或是相差小于一個定值（設為7px）:
d = Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2))
當d=0或是小于7時，即可認定用戶沒有拖拽。此時clickFlag為true，可以觸發點擊事件。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88500.html
摘要：自定義多級右鍵菜單實現效果自定義多級右鍵菜單第五課第六題中已經通過事件實現了一級右鍵菜單，所以這題只要在上面再添加事件喚出子菜單即可。 0x1完美拖拽 實現效果：6-01完美拖動 這里沒有使用h5的拖動，畢竟原題也是考察借助鼠標事件實現自定義的拖動，所以就借鑒了《js高級程序設計》里的自定義拖動自己封裝了個拖動api，當然由于做這個系列題目使用的都是es5的語法，所以IE8往下就兼容不...
摘要：前言本篇文章是基礎知識的篇，如果前面的基礎知識入門篇看完了，現在就可以學習了。基本概念分為三個部分。在這個基礎上使用一些新特性，高級瀏覽器支持，低級瀏覽器不支持。在對象中的屬性是一個布爾值，只有和。 showImg(https://segmentfault.com/img/remote/1460000012581493?w=1920&h=1080); DOM 前言 本篇文章是JavaS...
摘要：當用戶選擇文本框或中的一個或多個字符觸發。當文本框或內容改變且失去焦點后觸發。事件對象事件對象就是對象，通過處理函數傳遞。比如右擊文本框輸入區域，會彈出系統菜單點擊超鏈接會跳轉到指定頁面點擊提交按鈕會提交數據。 前端學習：教程&開發模塊化/規范化/工程化/優化&工具/調試&值得關注的博客/Git&面試-前端資源匯總 歡迎提issues斧正：Event JavaScript-事件even...
摘要：本教程會使用到語法，而第二部分的項目是用寫的。閱讀本教程需要你掌握這兩項預備知識。在中可以代表組節點邊，這個類封裝了的操作，本教程不涉及到組的內容。表示在邊的正交線上移到的距離。 showImg(https://segmentfault.com/img/remote/1460000018510999?w=935&h=484); 在上一篇文章 《記一次繪圖框架技術選型: jsPlumb ...
摘要：在操作中存在著許多跨瀏覽器方面的坑，本文花了我將近一周的時間整理，我將根據實例整理那些大大小小的坑。在火狐中，與等效的是。對象的屬性則表示文檔的根節點。不區分和在下使用和時會同時返回或與給定值相同的元素。 js在操作DOM中存在著許多跨瀏覽器方面的坑，本文花了我將近一周的時間整理，我將根據實例整理那些大大小小的坑。 DOM的工作模式是：先加載文檔的靜態內容、再以動態方式對它們進行刷新，...
閱讀 2849·2021-08-20 09:37
閱讀 1607·2019-08-30 12:47
閱讀 1090·2019-08-29 13:27
閱讀 1685·2019-08-28 18:02
閱讀 749·2019-08-23 18:15
閱讀 3084·2019-08-23 16:51
閱讀 931·2019-08-23 14:13
閱讀 2125·2019-08-23 13:05
