我的框dblclick函数有问题，当我用框类单击div时，它无法通过页面dblclick，而是执行页面单击功能
我的问题是如何使带有框类的div上的双击忽略页面函数的双击功能？
这是我在html中的代码：
<html>
<head>
<link type="text/css" rel="stylesheet" href="css/organizer.css">
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/organizer.js"></script>
</head>
<body>
<div id="page">
</div>
</body>
</html>
这是js代码：
var tempX=0;
var tempY=0;
$(document).ready(function()
{
$('.box').dblclick(function()
{
box2();
});
$('#page').dblclick(function()
{
tempX=0;
tempY=0;
box();
});
});
function box()
{
tempX = event.pageX-110;
tempY = event.pageY-60;
$('<div></div>').addClass('box').css({top:tempY,left:tempX}).appendTo($('#page'));
}
function box2()
{
tempX = event.pageX-400;
tempY = event.pageY-180;
$('<div></div>').addClass('box2').css({top:tempY,left:tempX}).appendTo($('#page'));
}
这是CSS代码：
#page
{
position:relative;
background-color:yellow;
top:0px;
left:0px;
width:100%;
height:100%;
}
.box
{
position:absolute;
background-color:red;
display:inline-block;
width:200px;
height:100px;
margin:5px;
z-index:10;
}
.box2
{
position:absolute;
background-color:blue;
display:inline-block;
width:400px;
height:200px;
margin:5px;
z-index:10;
}
最佳答案
当您单击本身位于#page中的.box时，事件“冒泡”，这意味着将触发#page事件。为避免这种情况，请使用event.stopPropagation()。
另外，您将动作绑定到尚不存在的元素，因此除非您使用事件委托，否则它们将无法工作：$(document).on('dblclick','.box',function(){...});
JS
$(document).on('dblclick','.box',function(event)
{
event.stopPropagation();
box2();
});
$(document).on('dblclick','#page',function()
{
tempX=0;
tempY=0;
box();
});
另外，为了使您的#page可见，请将其位置设置为绝对位置。
JS Fiddle Demo