atom.xml

<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
  <title>xinpureZhu</title>
  <subtitle>测试这个博客</subtitle>
  <link href="/atom.xml" rel="self"/>
  
  <link href="http://xinpure.com/"/>
  <updated>2016-05-11T11:46:03.000Z</updated>
  <id>http://xinpure.com/</id>
  
  <author>
    <name>xinpureZhu</name>
    
  </author>
  
  <generator uri="http://hexo.io/">Hexo</generator>
  
  <entry>
    <title>Hello World</title>
    <link href="http://xinpure.com/hello-world/"/>
    <id>http://xinpure.com/hello-world/</id>
    <published>2016-05-11T11:46:03.000Z</published>
    <updated>2016-05-11T11:46:03.000Z</updated>
    
    <content type="html">&lt;p&gt;Welcome to &lt;a href=&quot;https://hexo.io/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;Hexo&lt;/a&gt;! This is your very first post. Check &lt;a href=&quot;https://hexo.io/docs/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;documentation&lt;/a&gt; for more info. If you get any problems when using Hexo, you can find the answer in &lt;a href=&quot;https://hexo.io/docs/troubleshooting.html&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;troubleshooting&lt;/a&gt; or you can ask me on &lt;a href=&quot;https://github.com/hexojs/hexo/issues&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;GitHub&lt;/a&gt;.&lt;/p&gt;
&lt;h2 id=&quot;Quick-Start&quot;&gt;&lt;a href=&quot;#Quick-Start&quot; class=&quot;headerlink&quot; title=&quot;Quick Start&quot;&gt;&lt;/a&gt;Quick Start&lt;/h2&gt;&lt;h3 id=&quot;Create-a-new-post&quot;&gt;&lt;a href=&quot;#Create-a-new-post&quot; class=&quot;headerlink&quot; title=&quot;Create a new post&quot;&gt;&lt;/a&gt;Create a new post&lt;/h3&gt;&lt;figure class=&quot;highlight bash&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;gutter&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;1&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;$ hexo new &lt;span class=&quot;string&quot;&gt;&quot;My New Post&quot;&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;p&gt;More info: &lt;a href=&quot;https://hexo.io/docs/writing.html&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;Writing&lt;/a&gt;&lt;/p&gt;
&lt;h3 id=&quot;Run-server&quot;&gt;&lt;a href=&quot;#Run-server&quot; class=&quot;headerlink&quot; title=&quot;Run server&quot;&gt;&lt;/a&gt;Run server&lt;/h3&gt;&lt;figure class=&quot;highlight bash&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;gutter&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;1&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;$ hexo server&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;p&gt;More info: &lt;a href=&quot;https://hexo.io/docs/server.html&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;Server&lt;/a&gt;&lt;/p&gt;
&lt;h3 id=&quot;Generate-static-files&quot;&gt;&lt;a href=&quot;#Generate-static-files&quot; class=&quot;headerlink&quot; title=&quot;Generate static files&quot;&gt;&lt;/a&gt;Generate static files&lt;/h3&gt;&lt;figure class=&quot;highlight bash&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;gutter&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;1&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;$ hexo generate&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;p&gt;More info: &lt;a href=&quot;https://hexo.io/docs/generating.html&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;Generating&lt;/a&gt;&lt;/p&gt;
&lt;h3 id=&quot;Deploy-to-remote-sites&quot;&gt;&lt;a href=&quot;#Deploy-to-remote-sites&quot; class=&quot;headerlink&quot; title=&quot;Deploy to remote sites&quot;&gt;&lt;/a&gt;Deploy to remote sites&lt;/h3&gt;&lt;figure class=&quot;highlight bash&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;gutter&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;1&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;$ hexo deploy&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;p&gt;More info: &lt;a href=&quot;https://hexo.io/docs/deployment.html&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;Deployment&lt;/a&gt;&lt;/p&gt;
</content>
    
    <summary type="html">
    
      &lt;p&gt;Welcome to &lt;a href=&quot;https://hexo.io/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;Hexo&lt;/a&gt;! This is your very first post. Check &lt;a href=&quot;https://hexo.
    
    </summary>
    
    
  </entry>
  
  <entry>
    <title>My First Post</title>
    <link href="http://xinpure.com/My-First-Post/"/>
    <id>http://xinpure.com/My-First-Post/</id>
    <published>2015-05-17T02:40:23.000Z</published>
    <updated>2016-05-17T08:37:21.000Z</updated>
    
    <content type="html">&lt;blockquote&gt;
&lt;p&gt;JS 原生事件并没有长按事件，但是我们可以利用一些原有的事件，来实现长按事件&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2 id=&quot;任务需求&quot;&gt;&lt;a href=&quot;#任务需求&quot; class=&quot;headerlink&quot; title=&quot;任务需求&quot;&gt;&lt;/a&gt;任务需求&lt;/h2&gt;&lt;p&gt;最近在工作上遇到一个特殊的需求，就是需要实现长按来增加或者减少数值&lt;/p&gt;
&lt;p&gt;这就类似于，购物车中的物品数量的加减按钮，单击按钮物品数量相应增加或者减少一个数量，利用长按来实现快速增加或者减少物品数量&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;http://images2015.cnblogs.com/blog/708972/201605/708972-20160511110048015-1999018068.png&quot; alt=&quot;JS如何利用定时器实现长按事件&quot;&gt;&lt;/p&gt;
&lt;a id=&quot;more&quot;&gt;&lt;/a&gt;
&lt;h2 id=&quot;思考方法&quot;&gt;&lt;a href=&quot;#思考方法&quot; class=&quot;headerlink&quot; title=&quot;思考方法&quot;&gt;&lt;/a&gt;思考方法&lt;/h2&gt;&lt;p&gt;在知道这个需求之后，开始还是比较茫然的&lt;/p&gt;
&lt;p&gt;虽然在之前我也在一些购物 APP 里见到过这种长按的功能，但是在 JS 里似乎并没有长按事件&lt;/p&gt;
&lt;p&gt;后来我就在想，怎么样利用现有的一些事件来实现这一功能呢？&lt;/p&gt;
&lt;p&gt;这个时候我想到了 &lt;code&gt;mousedown&lt;/code&gt; 和 &lt;code&gt;mouseup&lt;/code&gt; 这两个事件&lt;/p&gt;
&lt;p&gt;当时我就想，如果在 &lt;code&gt;mousedown&lt;/code&gt; 事件触发的时候，利用 &lt;code&gt;setTimeout&lt;/code&gt; 或者 &lt;code&gt;setInterval&lt;/code&gt; 定时增加或者减少数值&lt;/p&gt;
&lt;p&gt;然后在 &lt;code&gt;mouseup&lt;/code&gt; 事件触发的时候，利用 &lt;code&gt;clearTimeout&lt;/code&gt; 或者 &lt;code&gt;clearInterval&lt;/code&gt; 清除定时器&lt;/p&gt;
&lt;p&gt;这样是不是就能实现这样的需求呢？&lt;/p&gt;
&lt;h2 id=&quot;实践想法&quot;&gt;&lt;a href=&quot;#实践想法&quot; class=&quot;headerlink&quot; title=&quot;实践想法&quot;&gt;&lt;/a&gt;实践想法&lt;/h2&gt;&lt;p&gt;既然有了想法，就要付诸实践&lt;/p&gt;
&lt;p&gt;我写了个例子来测试这个想法，结果却并没有想得这么简单&lt;/p&gt;
&lt;p&gt;当我通过鼠标按住按钮之后，数值是不断的增加或者减少，但是即使我松开鼠标，数值却并没有停止，而是依然为不断的增加或者减少&lt;/p&gt;
&lt;p&gt;这时我就疑惑了，理论上说，在 &lt;code&gt;mouseup&lt;/code&gt; 事件触发之后，定时器应该是已经被清除的，为何没有清除呢？&lt;/p&gt;
&lt;p&gt;带着疑惑，我开始了 &lt;code&gt;Google&lt;/code&gt;&lt;/p&gt;
&lt;p&gt;&lt;code&gt;Google&lt;/code&gt; 将我指引到了 &lt;a href=&quot;https://jquerymobile.com/&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;Jquery Mobile&lt;/a&gt; 库&lt;/p&gt;
&lt;p&gt;这个类库实现了一个 &lt;code&gt;taphold&lt;/code&gt; 事件，就是我想要的长按事件&lt;/p&gt;
&lt;p&gt;既然已经有了类似的实现，我就在想，是不是我哪里想错了？&lt;/p&gt;
&lt;p&gt;然后我就查看了 &lt;code&gt;Jquery Mobile&lt;/code&gt; 关于 &lt;code&gt;taphold&lt;/code&gt; 的源码&lt;/p&gt;
&lt;p&gt;看完源码后，我惊喜的发现，原来他也是利用 &lt;code&gt;setTimeout&lt;/code&gt; 来实现的这一事件，证明我的想法是对的！&lt;/p&gt;
&lt;p&gt;带着惊喜，我开始分析我思考的不足的地方。&lt;/p&gt;
&lt;p&gt;最后我发现，原来是我没有做好对事件的监听&lt;/p&gt;
&lt;p&gt;我只是单纯的绑定了 &lt;code&gt;mousedown&lt;/code&gt; 和 &lt;code&gt;mouseup&lt;/code&gt; 两个事件，这是我在 JS 事件处理上的不足&lt;/p&gt;
&lt;h2 id=&quot;完善实现&quot;&gt;&lt;a href=&quot;#完善实现&quot; class=&quot;headerlink&quot; title=&quot;完善实现&quot;&gt;&lt;/a&gt;完善实现&lt;/h2&gt;&lt;p&gt;知道了问题之后，我就开始修改之前写的例子&lt;/p&gt;
&lt;p&gt;采用 &lt;code&gt;Jquery Mobile&lt;/code&gt; 库对事件的处理方式，来实现这个长按的功能，并且也根据自身的需求进行修改&lt;/p&gt;
&lt;p&gt;在修改的过程中，我发现了一个问题，就是当我长按一个按钮的时候，如果我移动鼠标，长按事件也会一直持续下去，并且放开鼠标也不会停止&lt;/p&gt;
&lt;p&gt;在翻看 JS 事件的之后，我找到了 &lt;code&gt;mouseleave&lt;/code&gt; 这个事件，就是当鼠标离开按钮之后，会触发这个事件，加上之后，问题也得己解决。&lt;/p&gt;
&lt;p&gt;为了兼容移动设备，我加上了对 &lt;code&gt;touchstart&lt;/code&gt; 、&lt;code&gt;touchend&lt;/code&gt; 、&lt;code&gt;touchcencel&lt;/code&gt; 几个事件的监听&lt;/p&gt;
&lt;p&gt;本来也想加上 &lt;code&gt;touchleave&lt;/code&gt; 事件，来处理触摸时用户移动到按钮外的情况，但是似乎这个事件已经被废弃掉了：&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;This event was a proposal in an early version of the specification and has not been implemented. Do not rely on it. —— &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/Events/touchleave&quot; target=&quot;_blank&quot; rel=&quot;external&quot;&gt;MDN&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;也尝试了使用 &lt;code&gt;touchmove&lt;/code&gt; 事件来代替，但是似乎会影响用户体验&lt;/p&gt;
&lt;p&gt;因为添加了这个事件之后，就算是在按钮上触摸移动，也会触发 &lt;code&gt;touchmove&lt;/code&gt; 事件&lt;/p&gt;
&lt;p&gt;所以如果是用户误操作的话，也会中止长按操作。&lt;/p&gt;
&lt;p&gt;不过，&lt;code&gt;touch&lt;/code&gt; 事件并不会像 &lt;code&gt;mouse&lt;/code&gt; 事件一样，触摸移动到按钮外之后再放开手指，事件还是可以正常处理，并不会影响使用&lt;/p&gt;
&lt;h2 id=&quot;最终代码&quot;&gt;&lt;a href=&quot;#最终代码&quot; class=&quot;headerlink&quot; title=&quot;最终代码&quot;&gt;&lt;/a&gt;最终代码&lt;/h2&gt;&lt;h3 id=&quot;JS-Code&quot;&gt;&lt;a href=&quot;#JS-Code&quot; class=&quot;headerlink&quot; title=&quot;JS Code&quot;&gt;&lt;/a&gt;JS Code&lt;/h3&gt;&lt;figure class=&quot;highlight plain&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;gutter&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;1&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;2&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;3&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;4&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;5&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;6&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;7&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;8&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;9&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;10&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;11&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;12&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;13&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;14&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;15&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;16&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;17&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;18&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;19&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;20&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;21&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;22&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;23&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;24&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;25&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;26&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;27&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;28&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;29&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;30&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;31&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;32&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;33&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;34&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;35&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;36&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;37&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;38&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;39&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;40&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;41&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;42&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;43&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;44&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;45&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;46&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;47&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;48&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;49&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;50&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;51&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;52&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;53&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;54&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;55&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;56&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;57&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;58&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;59&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;60&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;61&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;62&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;63&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;64&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;65&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;66&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;67&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;68&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;69&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;70&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;71&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;72&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;73&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;74&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;var tapParams = &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    timer: &amp;#123;&amp;#125;,&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    element: &amp;#123;&amp;#125;,&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    tapStartTime: 0,&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    type: &amp;apos;increment&amp;apos;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;#125;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;function clearTapTimer() &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    clearTimeout(tapParams.timer);&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;function clearTapHandlers() &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    clearTapTimer();&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    $(tapParams.element).unbind(&amp;apos;mouseup&amp;apos;, clearTapTimer)&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;        .unbind(&amp;apos;mouseleave&amp;apos;, clearTapHandlers);&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    //移动设备&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    $(tapParams.element).unbind(&amp;apos;touchend&amp;apos;, clearTapTimer)&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;        .unbind(&amp;apos;touchcencel&amp;apos;, clearTapHandlers);&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;function tapEvent(aEvent, aType) &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    //阻止默认事件并解除冒泡&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    aEvent.preventDefault();&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    aEvent.stopPropagation();&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    tapParams = &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;        element: aEvent.target,&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;        startTime: new Date().getTime() / 1000,&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;        type: aType&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    &amp;#125;;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    $(tapParams.element).bind(&amp;apos;mouseup&amp;apos;, clearTapTimer)&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;        .bind(&amp;apos;mouseleave&amp;apos;, clearTapHandlers);&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    //移动设备&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    $(tapParams.element).bind(&amp;apos;touchend&amp;apos;, clearTapTimer)&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;        .bind(&amp;apos;touchcencel&amp;apos;, clearTapHandlers);&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    changeNumber();&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;function changeNumber() &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    var currentDate = new Date().getTime() / 1000;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    var intervalTime = currentDate - tapParams.startTime;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    //根据长按的时间改变数值变化幅度&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    if (intervalTime &amp;lt; 1) &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;        intervalTime = 0.5;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    &amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    var secondCount = intervalTime * 10;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    if (intervalTime == 3) &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;        secondCount = 50;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    &amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    if (intervalTime &amp;gt;= 4) &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;        secondCount = 100;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    &amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    var numberElement = $(&amp;apos;.number&amp;apos;);&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    var currentNumber = parseInt(numberElement.val());&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    if (tapParams.type == &amp;apos;increment&amp;apos;) &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;        currentNumber += 1;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    &amp;#125; else if (tapParams.type == &amp;apos;decrement&amp;apos;) &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;        currentNumber -= 1;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    &amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    numberElement.val(currentNumber &amp;lt;= 0 ? 1 : currentNumber);&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    tapParams.timer = setTimeout(&amp;apos;changeNumber()&amp;apos;, 1000 / secondCount);&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;#125;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;h3 id=&quot;HTML-Code&quot;&gt;&lt;a href=&quot;#HTML-Code&quot; class=&quot;headerlink&quot; title=&quot;HTML Code&quot;&gt;&lt;/a&gt;HTML Code&lt;/h3&gt;&lt;figure class=&quot;highlight plain&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;gutter&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;1&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;2&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;3&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;4&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;5&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;6&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;7&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;&amp;lt;div class=&amp;quot;container&amp;quot;&amp;gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    &amp;lt;div class=&amp;quot;section&amp;quot;&amp;gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;        &amp;lt;div class=&amp;quot;decrement&amp;quot; onmousedown=&amp;quot;tapEvent(event, &amp;apos;decrement&amp;apos;)&amp;quot; ontouchstart=&amp;quot;tapEvent(event, &amp;apos;decrement&amp;apos;)&amp;quot;&amp;gt;－&amp;lt;/div&amp;gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;        &amp;lt;input class=&amp;quot;number&amp;quot; value=&amp;quot;1&amp;quot;&amp;gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;        &amp;lt;div class=&amp;quot;increment&amp;quot; onmousedown=&amp;quot;tapEvent(event, &amp;apos;increment&amp;apos;)&amp;quot; ontouchstart=&amp;quot;tapEvent(event, &amp;apos;increment&amp;apos;)&amp;quot;&amp;gt;＋&amp;lt;/div&amp;gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    &amp;lt;/div&amp;gt;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;h3 id=&quot;CSS-Code&quot;&gt;&lt;a href=&quot;#CSS-Code&quot; class=&quot;headerlink&quot; title=&quot;CSS Code&quot;&gt;&lt;/a&gt;CSS Code&lt;/h3&gt;&lt;figure class=&quot;highlight plain&quot;&gt;&lt;table&gt;&lt;tr&gt;&lt;td class=&quot;gutter&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;1&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;2&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;3&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;4&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;5&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;6&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;7&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;8&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;9&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;10&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;11&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;12&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;13&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;14&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;15&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;16&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;17&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;18&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;19&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;20&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;21&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;22&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;23&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;24&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;25&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;26&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;27&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;28&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;29&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;30&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;31&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;32&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;33&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;34&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;35&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;td class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;line&quot;&gt;.section &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    display: -webkit-flex;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    display: flex;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    -webkit-justify-content: center;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    justify-content: center;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    -webkit-flex-flow: row nowrap;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    flex-flow: row nowrap;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    -webkit-align-items: center;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    align-items: center;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    height: 30px;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    width: 130px;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    font-size: 16px;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;.number &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;	-webkit-flex: 1;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    flex: 1;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    width: 30px;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    height: 30px;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    border: 1px solid #000;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    display: inline-block;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    border-radius: 5px;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    margin: 0 10px;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    text-align: center;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;#125;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;.decrement, .increment &amp;#123;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    width: 30px;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    height: 30px;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    border: 1px solid #000;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    display: inline-block;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    border-radius: 5px;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    text-align: center;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    line-height: 28px;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    cursor: pointer;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;    font-size: 20px;&lt;/span&gt;&lt;br&gt;&lt;span class=&quot;line&quot;&gt;&amp;#125;&lt;/span&gt;&lt;br&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/figure&gt;
&lt;h2 id=&quot;效果展示&quot;&gt;&lt;a href=&quot;#效果展示&quot; class=&quot;headerlink&quot; title=&quot;效果展示&quot;&gt;&lt;/a&gt;效果展示&lt;/h2&gt;&lt;p&gt;&lt;img src=&quot;http://images2015.cnblogs.com/blog/708972/201605/708972-20160511141508499-1896745175.gif&quot; alt=&quot;JS如何利用定时器实现长按事件&quot;&gt;&lt;/p&gt;
</content>
    
    <summary type="html">
    
      &lt;blockquote&gt;
&lt;p&gt;JS 原生事件并没有长按事件，但是我们可以利用一些原有的事件，来实现长按事件&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2 id=&quot;任务需求&quot;&gt;&lt;a href=&quot;#任务需求&quot; class=&quot;headerlink&quot; title=&quot;任务需求&quot;&gt;&lt;/a&gt;任务需求&lt;/h2&gt;&lt;p&gt;最近在工作上遇到一个特殊的需求，就是需要实现长按来增加或者减少数值&lt;/p&gt;
&lt;p&gt;这就类似于，购物车中的物品数量的加减按钮，单击按钮物品数量相应增加或者减少一个数量，利用长按来实现快速增加或者减少物品数量&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;http://images2015.cnblogs.com/blog/708972/201605/708972-20160511110048015-1999018068.png&quot; alt=&quot;JS如何利用定时器实现长按事件&quot;&gt;&lt;/p&gt;
    
    </summary>
    
      <category term="Javascript" scheme="http://xinpure.com/categories/Javascript/"/>
    
    
      <category term="Javascript" scheme="http://xinpure.com/tags/Javascript/"/>
    
  </entry>
  
</feed>