Javascript 为什么box dblclick不起作用？_Javascript_Html_Css

Javascript 为什么box dblclick不起作用？

javascript html css

Javascript 为什么box dblclick不起作用？,javascript,html,css,Javascript,Html,Css,我对box dblclick函数有一个问题，当我使用box类单击div时，它没有传递页面dblclick，而是执行页面单击函数我的问题是如何使双击div with box类忽略页面函数的双击功能这是我的html代码： <html> <head> <link type="text/css" rel="stylesheet" href="css/organizer.css"> <script type="text/javascript"

我对box dblclick函数有一个问题，当我使用box类单击div时，它没有传递页面dblclick，而是执行页面单击函数

我的问题是如何使双击div with box类忽略页面函数的双击功能

这是我的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>

当您单击页面中的.box时，事件会出现气泡，这意味着页面事件将被触发。要避免这种情况，请使用event.stopPropagation

此外，您正在将操作绑定到尚不存在的元素，因此除非使用事件委派，否则这些操作将无法工作：

$document.on'dblclick'，'.box'，函数{…}

另外，要使页面可见，请将其位置设置为“绝对”

您的页面元素不是在HTML中出现的。您需要绝对位置而不是相对位置，或者在页面元素中放置一些文本内容，这样应该可以正常工作。@user15337我编辑了我的答案，请查看JS Fiddle演示

    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'));

}

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

$(document).on('dblclick','.box',function(event) 
    {
        event.stopPropagation();
        box2();
    });
$(document).on('dblclick','#page',function()
    {
        tempX=0;
        tempY=0;
        box();
    });