我怎樣才能「用簡單的JavaScript滑動鼠標」？

Question

我是JavaScript新手，我想以某種方式「掌握」它，爲了讓我這樣做，我不想使用任何庫[如jQuery]。

話雖這麼說，我已經找到了幾種方法來實現「鼠標刷卡」只有JavaScript的，如：Simulate swipe with mouse in javascript。 但是我發現的帖子中的答案總是很淺。即使所有的解決方案都指向：mousedown - > mousemove - > mouseup事件。這是我正在做的事情。

我爲自己設置了一個練習來「掌握」javascript的基礎：我將不得不創建一個平面和跨瀏覽器兼容的界面，它允許我保存筆記（在本地存儲中）僅使用javascript，css3和html5（最難的部分是跨瀏覽器兼容性）。

所以我想到了一個簡單的2列表：保存筆記（第一列）和筆記（第二列）的標題。即

FYI：我想張貼的圖片，但似乎我不是計算器人氣不足：「你至少需要10聲譽發表圖片」，所以我把它像一個正常的鏈接，我希望它是好的。

最重要的是表格。我希望能夠「滑動」表格的行。

這是我已經拿出來（我不會把所有的代碼中，我得到了什麼只是基礎知識）：

第一：該表是一組通過CSS類;

/*CSS*/ 
div.table { 
    display: table; 
} 
div.table .row{ 
    display: table-row; 
} 
div.table .row .col, div.table .row .col-2{ 
    display: table-cell; 
} 

二：html的;

<div id="savedNotesTable" class="table"> 
    <div class="row"> 
     <div class="col">Testing</div> 
     <div class="col-2">This is a test</div> 
    </div> 
    <div class="row"> 
     <div class="col">Testing</div> 
     <div class="col-2">This is a test</div> 
    </div> 
    <div class="row"> 
     <div class="col">Testing</div> 
     <div class="col-2">This is a test</div> 
    </div> 
</div> 

最後但並非最不重要的：javascript的

function addEvent(element, type, fn){ 
    // custom add event function that cares about compatibility 
    // returns fn 
} 

function removeEvent(element, type, fn){ /*custom remove event function that cares about compatibility and removes only the specific handler*/ } 

function addSwipe(element, parent){ 
    addEvent(element, "mousedown", function(e){ 
     var mouseupHandler = addEvent(document, "mouseup", mouseUpHandler); 
     var mousemoveHandler = addEvent(document, "mousemove", function(e){ 
      // element.style.position = "static"; 
      // parent.style.left = e.pageX + 'px'; 
      // add transition and blur to the element 
      // mouseSwipe = absolute value of(originalPosition of mouse - e.pageX) 
     }); 

     function mouseUpHandler(e){ 
      // pseudocode: 
      // if mouseSwipe >= 50%(div size) = delete from the parent which is the "table" 
      // transition and blur OUT to 100% and delete 
      // if mouseSwipe < 50%(div size) = don't delete 
      // transition back to 0% and unblur. 

      removeEvent(document, "mousemove", mousemoveHandler); 
      removeEvent(document, "mouseup", mouseupHandler); 
     }; 
    });  
}; 

// this is just to add them to the test notes on the html 
// The real thing is going to add the swipe when I save the new element 
var table = document.getElementById("savedNotesTable"); 
var notes = table ? table.childNodes : undefined; 
for(var prop in notes){ 
    if(prop != "length" && notes.hasOwnProperty(prop)){ 
     if(notes[prop].nodeName != "#text"){ 
      addSwipe(notes[prop], table); 
     }; 
    }; 
}; 

我這樣做對嗎？還是有另一種方式我沒有看到？ 我能夠在onmousedown事件中弄到某處像位置=「絕對」那樣的div位置，但這與表格行的寬度和長度混淆了。

我正在尋找最佳實踐。

Answer 1

就有關事件處理程序的一句話動態歸屬

只要你的元素不被破壞，也沒有必要去除附着於它（除非你想完全改變元素的行爲的事件處理程序，但這是而不常見）。

添加和刪除事件處理程序相對昂貴，並且在某些情況下可能導致內存泄漏較小。將處理程序留在原地並修改它們（稍微）以便在所有情況下都可以工作通常更簡單和更安全。

我還認爲，通過將所有事件綁定在一個位置，並強制處理程序在所有情況下都能正常運行，它使代碼更具可讀性。但這是個人品味的問題。

問題在於mousemove，即使沒有拖動時也會觸發（即鼠標按鈕沒有被按下時）。

可以（只是簡單的代碼來演示原理）搞定，像這樣：

function onMouseDown() { 
    dragging = true; 
} 

function onMouseMove() { 
    if (!dragging) return; // skip dragging action if mouse button not depressed 
    // do your dragging stuff 
} 

function onMouseUp() { 
    dragging = false; 
    // do your end of dragging stuff 
} 

// handlers bound to the element only once 
addEvent (element, 'mousedown', onMouseDown); 
addEvent (element, 'mousemove', onMouseMove); 
addEvent (element, 'mouseup' , onMouseUp);