Question

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

<!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上发生的点击事件 - 第二个div hide
在第一个div上发生了点击事件

我想要什么 -tap second div
- 在第二个div上发生的点击事件 - 第二个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第二个 vmouseup第二个点击第二个点按第二个

Android： vmousedown第二个 vmouseup第二个点击第二个 vmousedown首先首先是vmouseup 点击第一个先点按

Answer 1

嗯，我认为问题是你正在使用jQM Alpha（jquery.mobile-1.0a4.1.js），升级到最新版本我觉得它按预期工作。您也可以绑定点击事件.bind('tap', function()

http://jsfiddle.net/LFPNC/

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;
}

隐藏目标div后点击事件冒泡

1 个答案: