javascript - 如何使用普通javascript进行"mouse swipe"?

  显示原文与译文双语对照的内容

我是新的javascript,并且试图在某种程度上使用"母版",为了让我不想使用任何库 [like jQuery] 。

也就是说,我已经找到了几种方法来实现一个收费的"鼠标滑动",就像下面这样: 模拟用鼠标在javascript中滑动。 但在我找到的文章中答案总是很浅。

即使是,所有解决方案都指向: mousedown -> -> mouseup事件。 我就是这么做的。

我为自己设置了一个练习,以"母版"的基础: 如果只使用 javascript,css3和 html5,我就必须创建一个平面和cross-browser-compatible接口,让我可以节省notes英镑的笔记。

所以我想了一个简单的table 和 2列: 保存注释( 第一列) 和注释( 第二列)的标题。 i.e.

enter image description here

我想发布图片,但似乎我不太受欢迎 for: "你至少需要 10个信誉来发布图像"所以我将它设置成一个正常的链接,希望它。

重要的是最后的table 。 我希望能够对表格的行进行"鼠标滑动"处理。

这就是我所看到的( 我不会把所有的代码都放在这里,仅仅是我所得到的):

首先:table 是一组通过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);
 };
 };
};

就 像 这个 样子 吗? 还是有别的方法我看不到? 我能够找到一个 position="绝对"inside的位置,这个事件的onmousedown 事件的宽度和长度。

我正在寻找最佳实践。

时间: 作者:

关于事件处理程序动态属性的注释

只要你的元素没有被销毁,就不需要删除附加到 to ( 除非你想完全改变元素的行为,但这是不常见的)的事件处理程序。

在某些情况下,添加和移除事件处理程序比较昂贵,并且可能导致内存泄漏。 保持处理程序在位并修改( 轻微) 在所有情况下工作通常更简单和安全。

我还认为它使代码更加可以读,通过将所有事件绑定放在一个位置,并强制处理程序正常运行。 但那是个人品味的问题。

这里问题是,即使你没有拖动( 例如 ),它也会发生火灾。 当鼠标按钮不被按下时。

你可以像这样处理( 简化代码只是为了演示):


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);

作者:
...