gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 06:42:07 27 4
gpt4 key购买 nike

我使用 photoswipe 插件。当我点击关闭按钮时,Photoswipe 关闭。但是在 photoswipe 隐藏后,div 点击事件触发了 photoswipe 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 tap 处理程序中做什么以防止在第一个 div 上触发 tap 事件?

我更改了示例以查看触发了哪些事件

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

});

电脑输出:
vmousedown 秒
vmouseup 第二个
点击第二个
点击秒

安卓:vmousedown 秒
vmouseup 第二个
点击第二个
vmousedown 首先
vmouseup 优先
先点击
先点击

最佳答案

嗯,我认为问题是您正在使用 jQM Alpha (jquery.mobile-1.0a4.1.js),升级到最新版本我认为它按预期工作。你也可以绑定(bind)点击事件 .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;
}​

关于javascript - 隐藏目标 div 后点击事件冒泡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10313501/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com