2

photoswipeプラグインを使用しています。閉じるボタンをタップすると、フォトスワイプが閉じます。ただし、photoswipeが非表示になった後、photoswipedivの下にある画像でdivtapイベントがトリガーされました。この動作を防ぐにはどうすればよいですか？例えば：

<!DOCTYPE HTML >
<html>
<head>
    <script type="text/javascript" src="jquery-1.7.2.js"></script>
    <script type="text/javascript" src="jquery.mobile-1.0a4.1.js"></script>
    <style type="text/css">

            div
            {
                width: 300px;
                height: 300px;
            }
            .first
            {
                background-color: black;
            }

            .second
            {
                width: 200px;
                height: 200px;
                position: absolute;
                top : 50px;
                left: 50px;
                background-color: red;
                z-index: 2;
            }
    </style>

    <script type="text/javascript">
        $(function()
        {
            $('.first').tap(function()
            {
                $(this).css({backgroundColor : 'green'});

            });

            $('.second').tap(function()
            {
                $(this).hide();
            });

        })
    </script>
</head>
<body>
<div class='first'></div>
<div class='second'></div>

</body>
</html>

仕組み-2番目のdivをタップします-2番目のdiv
でタップイベントを起動します-2番目
のdivを非表示
にします-最初のdivでタップイベントを起動します

私が欲しいもの
-tapseconddiv
-fired tap event on second div
-seconddivhide-
何も起こらない

最初のdivでタップイベントが発生しないようにするには、2番目のdivタップハンドラーで何をする必要がありますか？

例を変更して、どのイベントがトリガーされたかを確認しました

$(function()
        {
            $('.first').bind('vmousedown',function()
            {
                info('vmousedown first' )
            }).bind('vmouseup', function(){
                info('vmouseup first')
            })
            .bind('click',function(){
                info('click first');
            }).bind('tap', function(){
                info('tap first');
            });

            $('.second').bind('vmousedown',function()
            {
                info('vmousedown second' )
            }).bind('vmouseup', function(){
                info('vmouseup second');
            })
            .bind('click',function(){
                 info('click second');
            }).bind('tap', function(){
                 info('tap second');
                 $(this).hide();
            });

        });

PC出力：
vmousedown2番目
のvmouseup2番目の
クリック2番目の
タップ2番目

Android：vmousedown2番目
のvmouseup2番目の
タップ2番目
のvmousedown最初の
vmouseup最初の
クリック最初の
タップ最初

4

1 に答える 1

0

問題は、jQM Alpha (jquery.mobile-1.0a4.1.js) を使用していて、最新リリースにアップグレードしていることだと思います。期待どおりに動作すると思います。また、タップイベントをバインドすることもできます.bind('tap', function()

JS

$(function()
{
    $('.first').tap(function()
    {
        $(this).css({backgroundColor : 'green'});

    });

    $('.second').tap(function()
    {
        $(this).hide();
    });
});

HTML

<!DOCTYPE HTML >
<html>
<head>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
<div class='first'></div>
<div class='second'></div>

</body>
</html>​

CSS

div
{
    width: 300px;
    height: 300px;
}
.first
{
    background-color: black;
}

.second
{
    width: 200px;
    height: 200px;
    position: absolute;
    top : 50px;
    left: 50px;
    background-color: red;
    z-index: 2;
}​
于 2012-04-25T13:01:06.823 に答える