Question

我是javascript的新手，我想以某种方式“掌握”它，为了让我这样做，我不想使用任何库[如jQuery]。

话虽如此，我已经找到了几种方法来实现“鼠标滑动”，只需使用javascript：Simulate swipe with mouse in javascript。但是我发现的帖子中答案总是很浅。

即便如此，所有解决方案都指向：mousedown - ＆gt; mousemove - ＆gt;鼠标事件。这就是我正在做的事情。

我为自己设置了一个“掌握”javascript基础的练习：我必须创建一个平面和跨浏览器兼容的界面，这样我就可以保存笔记（在本地存储中）使用只有javascript ，css3和html5（困难的部分是跨浏览器兼容性）。

所以我想到了一个包含2列的简单表：保存注释的标题（第一列）和注释（第二列）。即。

enter image description here

fyi：我试图发布图片，但似乎我对stackoverflow不够流行：“你需要至少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 =“absolute”这样的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);

如何用普通的javascript“鼠标滑动”？

1 个答案: