Question

我有一个盒子dblclick函数的问题它没有通过页面dblclick当我点击div与box类它做了页面点击功能

我的问题是我如何双击div类与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>

这是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;
}

Answer 1

当您点击 .box 时， #page ，事件＆＃34;冒泡＆＃34;，这意味着 #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 ，请将其设置为绝对。

为什么盒子dblclick不起作用？

1 个答案:

JS Fiddle Demo