javascript - 我如何使用纯 Javascript "mouse swipe"？

Question

我是 Javascript 的新手，我正在尝试以某种方式“掌握”它，为了做到这一点，我还不想使用任何库 [比如 jQuery]。

话虽这么说，我已经找到了几种只用 Javascript 实现“鼠标滑动”的方法，例如:Simulate swipe with mouse in javascript . 但在我找到的帖子中，答案总是很肤浅。

即便如此，所有解决方案都指向:mousedown -> mousemove -> mouseup 事件。这就是我正在做的。

我为自己设置了一个练习来“掌握”Javascript 的基础:我必须创建一个平面的和跨浏览器兼容的界面，允许我保存笔记(在本地存储中)使用只有 Javascript、css3 和 html5(困难的部分是跨浏览器兼容性)。

所以我想到了一个有 2 列的简单表格:保存笔记的标题(第一列)和笔记的标题(第二列)。即

重要的是最后的表格。我希望能够“用鼠标轻扫”表格的行。

这就是我想出来的(我不打算放所有的代码，只是我得到的基础知识):

首先:表格通过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 事件中 position="absolute"等 div 的位置，但这弄乱了表格行的宽度和长度。

我也在寻找最佳实践。

Answer 1

关于事件处理程序动态属性的评论

只要你的元素没有被销毁，就没有必要删除附加到它的事件处理程序(除非你想完全改变元素的行为，但这种情况很少见)。

添加和删除事件处理程序的成本相对较高，并且在某些情况下可能会导致小的内存泄漏。将处理程序留在原地并(稍微)修改它们以在所有情况下工作通常更简单、更安全。

我还认为，通过将所有事件绑定(bind)放在一个地方并强制处理程序在所有情况下都正确运行，它使代码更具可读性。但这是个人品味问题。

这里的问题出在 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);