论坛 › 知识问答 › javascript - 在Javascript中滑动以删除iOS的按钮？

菜鸟教程小白 发表于 2022-12-13 01:07:57

javascript - 在Javascript中滑动以删除iOS的按钮？

                                            <p><p>我只是在我的 iPod 上的 Safari 上浏览 Facebook，每当您在 Messenger 中并且您在任何消息上向右/向左滑动时，都会出现一个删除按钮。 </p>

<p>有人可以指导我并可能告诉我它是如何在 html/JS/jQuery 中完成的吗？</p>

<p>非常感谢!</p></p>
                                    <br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
                                            <p><p>我不了解 jQuery mobile，这将是一种更简单的方法，但这里是您可以在普通 ol' JS 中做到这一点的方法:</p>

<pre><code>document.body.addEventListener(&#39;touchstart&#39;,function(e)
{
    e = e || window.event;//don&#39;t know how mobile browsers behave here
    var startCoordinates = {x:e.changedTouches.clientX,
                            y:e.changedTouches.clientY};
    var endHandler = function(e)
    {
      e = e || window.e;
      var xDiff = Math.abs(Math.abs(startCoordinates.x) -
                           Math.abs(e.changedTouches.clientX));
      //unbind handler, avoid double listeners
      document.body.removeEventListener(&#39;touchend&#39;, endHandler, false);
      if (xDiff &gt;= 50)
      {//assume small movement wasn&#39;t intended as swipe
            //here a swipe was detected
            if (confirm(&#39;Are you sure you want to delete X?&#39;))
            {//perform xhr request here, or whatever
            }
      }
    };
    document.body.addEventListener(&#39;touchend&#39;,endHandler,false);
},false);
</code></pre>

<p>jQmobile 可能会容易得多，但这是我认为的基本思想，适用于我编写的所有移动浏览器(Android、iOS(4 到 6)，甚至是支持触摸的开发模式下的 chrome事件适用于这样的代码)。 </p>

<p><em>更新:</em><br/>
添加了专门处理滑动的代码:</p>

<pre><code>(function(G,und)
{
    &#39;use strict&#39;;
    var load = function()
    {
      var tStart, body = document.body;
      tStart = function(e)
      {
            e = e || G.event;
            var coords = e.changedTouches.clientX,
            tEnd = function(e)
            {
                e = e || G.event;
                var currentX = e.changedTouches.clientX;
                if (body.removeEventListener)
                {
                  body.removeEventListener(&#39;touchend&#39;,tEnd,false);
                }
                else
                {//shouldn&#39;t be possible, but I don&#39;t know all browsers, of course
                  body.detachEvent(&#39;ontouchend&#39;,tEnd);
                }
                if ((coords - currentX) &lt;= 50)
                {//too little movement
                  /*console.log*/alert(&#39;moved, but no real swipe&#39;);
                }
                else
                {
                  /*console.log*/alert(&#39;SWIIIPEEE!&#39;);
                }
            };
            if (body.addEventListener)
            {
                return body.addEventListener(&#39;touchend&#39;,tEnd,false);
            }
            body.attachEvent(&#39;ontouchend&#39;,tEnd);
      };
      if (G.removeEventListener)
      {
            body.addEventListener(&#39;touchstart&#39;,tStart,false);
            return G.removeEventListener(&#39;load&#39;,load,false);
      }
      body.attachEvent(&#39;ontouchstart&#39;,tStart);
      return G.detachEvent(&#39;onload&#39;,load);
    };
    if (G.addEventListener)
    {
      return G.addEventListener(&#39;load&#39;,load,false);
    }
    return G.attachEvent(&#39;onload&#39;,load);
}(this));
</code></pre></p>
                                   
                                                <p style="font-size: 20px;">关于javascript - 在Javascript中滑动以删除iOS的按钮？，我们在Stack Overflow上找到一个类似的问题：
                                                        <a href="https://stackoverflow.com/questions/14891108/" rel="noreferrer noopener nofollow" style="color: red;">
                                                                https://stackoverflow.com/questions/14891108/
                                                        </a>
                                                </p>
                                       

查看完整版本: javascript - 在Javascript中滑动以删除iOS的按钮？