javascript - Jquery 对 div 的关注

Question

我有两个 div，一个叫做“mainDesign”，一个叫做“div1”。

单击“div1”时，将调用 focusin 并且边框颜色会发生变化。

如果单击“mainDesign”，“div1”只能聚焦。

该脚本有效，但需要单击两次“mainDesign”才能使其工作，在它集中注意力后，该脚本可以完美运行。

有任何想法吗？代码：http: //jsfiddle.net/v3DWf/14/

谢谢。

Answer 1

使用 mousedown 和 stopPropagation() 重写：http: //jsfiddle.net/patrickmarabeas/v3DWf/20/

哈哈，看来Royce Feng 打败了我。

---

我删除了 focusout()，因为这似乎是一个不必要的步骤......

这是可以接受的吗？： http: //jsfiddle.net/patrickmarabeas/v3DWf/15/

编辑：切换功能，现在似乎按预期工作：http: //jsfiddle.net/patrickmarabeas/v3DWf/17/

Answer 2

您可以切换到使用.mousedown()和停止内部传播。

http://jsfiddle.net/v3DWf/18/

Answer 3

尝试这个：

$("#div1").focusin(function() {
    $(this).css("border-color","#ff9900");
});

$("#mainDesign").mousedown(function(){
    setTimeout(function(){
        if (!$("#div1").is(":focus"))
            $("#div1").css("border-color","#999999");        
    }, 100);
});  

超时是必要的，因为 mousedown 将在 div 模糊之前触发。

Answer 4

那么问题是你已经在 .focusout() 事件中嵌套了 .mousedown() 事件。

所以这里发生的是，当触发 focusout 事件时，您会将 .mousedown 事件附加到 mainDesign div。让我再重复一遍，在 focusout 事件触发之前，不会附加 .mousedown 事件。

然后，一旦附加了 .mousedown 事件，下次您在 mainDesign div 中按下 mousedown 时，该事件将触发，这就是为什么它当前需要您单击两次。

所以最简单的解决方案是简单地摆脱 .focusout 事件。