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

【问题标题】：Tap event bubbling after hide target div隐藏目标div后点击事件冒泡
【发布时间】：2012-04-25 10:07:25
【问题描述】：

我使用 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>

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

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

我应该在第二个 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 秒
点击第二个
点击第二个

安卓： vmousedown 秒
vmouseup 秒
点击第二个
首先 vmousedown
首先使用 vmouseup
先点击
先点一下

【问题讨论】：

标签： javascript jquery jquery-mobile tap

【解决方案1】：

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

http://jsfiddle.net/LFPNC/

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

【讨论】：