2

我使用 photoswipe 插件。当我点击关闭按钮时，Photoswipe 关闭。但是在 photoswipe 隐藏后，在 photoswipe div 下的图像上触发了 div 点击事件。我怎样才能防止这种行为？例如：

<!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>

它是如何工作的 -tap second div
-在第二个 div 上触发点击事件
-second div hide
-在第一个 div 上触发点击事件

我想要什么
-tap second div
-在第二个 div 上触发点击事件
-second div hide -什么都
没有发生

我应该在第二个 div 点击处理程序中做什么以防止在第一个 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输出：
vmousedown second
vmouseup second
click second
tap second

Android : vmousedown 第二次
vmouseup 第二次
点击 第二次
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 回答