0

我在处理 taphold 事件时遇到了严重的问题。请注意，我目前仅在 IOS 中遇到此问题。

我有一个 jQuery Mobile 应用程序。在该应用程序中，我有一个列表，当在其中一个列表项上调用一个轻按时，会打开一个模式弹出窗口。弹出窗口在窗口中心打开。当用户从屏幕上松开手指时，在手指下方的元素上触发 mouseup 和 mousedown（单击）事件。当弹出窗口位于手指下方时，没有问题。当“模态”灰色区域位于手指下方时，弹出窗口立即关闭。这种行为是正常的。不正常的是这些事件被调用。我可以轻松地绕过它，但这样做不是我的本性。我想知道原因。

我做了一个小小提琴来说明我的问题，但你需要一台 iPad 来测试它。我无法在 iPad 模拟器中重现该问题。

http://jsfiddle.net/yuFpa/38/

<code>
    <!DOCTYPE html> 

    <html>    
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
            <script src="http://code.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.js"></script>
        </head> 

        <body> 
            <div data-role="page" id="one">        
                <div data-role="header">
                    <h1>Taphold dialog test</h1>
                </div>

                <div data-role="content">                
                    <ul data-role="listview">
                        <li>
                            <a href="#">Dummy</a>
                        </li>

                        <li>
                            <a id="taphold-popup-btn" href="#">Taphold me to open popup</a>
                        </li>

                        <li>
                            <a href="#">Dummy</a>
                        </li>
                    </ul>

                    <div data-role="popup" id="taphold-popup" data-overlay-theme="a">
                        <p>This is a completely basic popup, no options set.<p>
                    </div>
                </div>
            </div>
        </body>
    </html>​
</code>
<code>
    $(document).ready(function() {
        $('#taphold-popup-btn').bind('taphold', function(e) {
            e.stopImmediatePropagation();
            e.preventDefault();        

            var $popup = $('#taphold-popup');
            $popup.popup();
            $popup.popup('open');
        });        
    });
</code>
4

0 回答 0