在隱藏目標div後點按事件冒泡

我使用photoswipe插件。當我點擊關閉按鈕時，Photoswipe關閉。但是，在隱藏光標後，div光標事件觸發圖像下的div tap事件。我可以如何防止這種行爲？例如：在隱藏目標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
-fired自來水事件的第二個div
- 第二格隱藏
-fired自來水事件
-t第二格
-第二格上發生的點擊事件
-second div hide
-沒有發生

我應該在第二個div tap處理程序中做什麼來防止第一個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第一
點擊第一
抽頭第一

來源

2012-04-25 Nikolai Borisik

嗯，我認爲這個問題是您正在使用JQM阿爾法（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; 
}

來源

2012-04-25 13:01:06

我試過jquery.mobile-1.1.0，但行爲沒有改變。 – 2012-04-25 15:38:21

在隱藏目標div後點按事件冒泡

回答

相關問題