Question

我有一个网站，有一个“商店”，你可以用“硬币”来买东西。现在，我正在创建商店并进行测试，所以请在这里查看 http://coinawards.net63.net/structure/shop.php

因此，当您点击“购买40个硬币”框时，会弹出一个浅蓝色框，上面写着“添加到购物车中”。

现在，我的代码说，一旦“购买”按钮变为BLURRED，弹出窗口就会消失......但事实并非如此。我将在下面发布我的代码，希望有人知道如何解决它！

代码：

function init()
{

    var buyinfobutton = $(".buyinfo");

    buyinfobutton.on("click",AddToCart);

    buyinfobutton.on("blur",popUpVanish);

    $('#confirmbox').hide();

}

onload = init;

var shoppingcart = {};

function AddToCart()
{
    // This is called properly.
    $('#confirmbox').show('normal');

}

function popUpVanish()
{
    // This is never called!
    $('#confirmbox').hide();

}

另外，如果你看到我的网站，并认为它需要在一个区域有一些改进（有些部分是坏的，我知道），请注意它！谢谢！

Answer 1

这就是我的想法，我想它正在寻找什么。我稍微重构了你的代码。

http://jsfiddle.net/kYT5U/

$(document).ready(function() {
    $(".buyinfo")
    .click(AddToCart)
    .mouseout(popUpVanish);
    $('#confirmbox').hide();
});

var shoppingcart = {};

function AddToCart() {
    $('#confirmbox').show('normal');
}

function popUpVanish() {
    $('#confirmbox').hide();
}

使用延迟和fadeOut更新了jsfiddle http://jsfiddle.net/kYT5U/1/

Answer 2

问题在于您尝试在默认情况下不支持焦点的DOM元素（div）上使用焦点相关事件（在某些浏览器中）。如果您使用 .buyinfo 类设置tabindex的{{1}}属性，则代码将按预期工作。您可以refer to the answer here了解更多详细信息，但如果您为div设置此属性，则

div

然后它将按预期工作。

为什么不调用JavaScript“onblur”函数？

2 个答案: