Question

是否有比this fiddle更清晰，更动态的方法来创建更改z-index的div弹出窗口，因为它们变得专注且没有焦点？

HTML：

<div id="div1"></div>
<div id="div2"></div>

CSS：

div {
    width:200px;
    height:200px;
    position:absolute;
    top:0px;
    left:0px;
}
#div1 {
    background-color:red;
}
#div2 {
    background-color:green;
}

使用Javascript：

$("#div1").draggable();
$("#div2").draggable();

$("#div1").mousedown(function () {
    $("#div1").css("z-index", 2);
    $("#div2").css("z-index", 1);
});

$("#div2").mousedown(function () {
    $("#div1").css("z-index", 1);
    $("#div2").css("z-index", 2);
});

我尝试使用.blur，.focus，.focusin和.focusout方法，但它们似乎对我不起作用。我需要一些div弹出窗口，里面有一些输入字段。 div将直接在体内。

以下是a fiddle，其中展示了我如何尝试使用.focusin和.focusout。我也试过.blur并相应地集中注意力。

使用focusin和focusout：

$("#div1").draggable();
$("#div2").draggable();

$("#div1").focusin(function () {
    $("#div1").css("z-index", 2);
});
$("#div2").focusin(function () {
    $("#div2").css("z-index", 2);
});
$("#div1").focusout(function () {
    $("#div1").css("z-index", 1);
});
$("#div2").focusout(function () {
    $("#div2").css("z-index", 1);
});

谢谢：）

编辑：

使用Amit Sonis method结束。比我原来的清洁得多：）

Answer 1

在上下文中使用dragstart和dragstop个事件

$("#div1").draggable();
$("#div2").draggable();

$( "#div1" ).on( "dragstart", function( event, ui ) {

    $(this).css("z-index" , 2);
    $("#div2").css("z-index" , 1);
});

$( "#div2" ).on( "dragstart", function( event, ui ) {

    $(this).css("z-index" , 2);
    $("#div1").css("z-index" , 1);
});

检查：

拖动开始：Dragstart

拖动停止：Dragstop

您可以在两个函数调用中访问当前事件。

FIDDLE

Answer 2

@Tero Heiskanen ......

根据.Focusin和.Focusout函数的jQuery API指南，它继承了.Focus（）函数的行为，这个函数适用于像...输入，选择，等等的集合的有限元素。所以可能你不能在“div”元素上使用这些函数。

但是，如果您仍想要为“div”触发这些事件，则必须对它们应用“tabindex”属性，但它们可能只能通过键盘TAB键导航来访问。

在jQuery网站上您有以上内容：http://api.jquery.com/focus/#entry-longdesc

使用jQuery focusin和focusout更改divs z-index

2 个答案: