在做前端时，出现的Click事件及Swipe滑动，touchstart时出现的问题及解决

 

 

在做前端页面的动态效果时，我们要做以下几个事情：

 

1）当打开地址列表页时，显示整个地址列表

2）在整个地址列表中，点击其中一个，即选中该地址，返回至订购页，并更新订购页地址

2）在整个地址列表中，滑动地址，出现编辑，删除功能。

 

首先，出现的第一个问题是，点击打开地址列表时，我从network中，发现ajax并调用了两次。

 

 

于是，我检查了一下代码，同时通过前端断点调试，发现事件被调用了两次，原因是使用了“click touchstart”这个事件。

该事件是把click 和touchstart这两个事件都执行了。

我当时这么写，纯粹是解决在移动端，click事件没反应，因为加上touchstart，然后就可以调用了，没想到被调用了两次ashx

看到对事情的理解，非常重要，必不是只考虑实现，如果是这样的吧，可能是金玉其外，败絮其中。最后系统都被调用的乱七八糟。

 

因此 ，我把touchstart事件删除掉。重新找解决办法。

 

最后通过各种偿试，各种资料找到了解决方案：

通过设置swipe滑动功能里的参数threshold: 75,解决拖动动作及click 事件不生效的问题

这样：既然不影响click事件，滑动事件也能进行。显示如下：

 

 

 

解决上面这些问题的过程中，还出现了一个append出来的html代码，滑动效果无法调用，原来是入在另外一个js文件，引用过来。

后来想着，我们把代码复制到调用的地址，结果行了。

 

暂时还没想通为何要这样，反正是可以运行了，代码如下：

 

 

到此，主要说的是解决了两个问题：

1. JS  append出来的HTML代码，如果代码里面含用可能的调用的事情，这个swipe要放在他下面

2.click和touchstart不能放一起，通过threshold的设置为75（滑动的像素），即可区别出来是click事件，还是滑动和touch事件。