taphold后触发点击事件

时间:2012-12-17 16:10:17

标签: jquery ios jquery-mobile

我在处理taphold事件时遇到了严重问题。请注意,我目前在IOS中只有这个问题。

我有一个jQuery Mobile应用程序。在该应用程序中,我有一个列表,当在其中一个列表项上调用taphold时,将打开一个模式弹出窗口。弹出窗口在窗口中央打开。当用户从屏幕释放他的手指时,在手指下方的元素上触发鼠标和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>

0 个答案:

没有答案