使用Java的模式弹出窗口

Question

我有一个可点击的图像，当您单击模式弹出窗口时。 我想确保您只能单击一次，并且在显示弹出窗口时，可点击的图像是不可点击的。 我尝试了几种方法，但没有一种解决方案如我所愿。

这是代码：

init: function () {
    var myButton = document.getElementById("kaffePic"); 
    var clickable = true;
    console.log(clickable);

    myButton.onclick = function(e) {
        e.preventDefault();

        console.log(clickable);

        if(clickable)
        {
            clickable = false;
            popup(myButton, clickable);
        }
        else
        {
            return false;
        }
    };
}

这是弹出窗口的一部分（删除了一些与问题无关的代码）。

function popup(theButton, returnClick) {
    var myDiv = document.createElement("div");
    myDiv.className = "popupWindow";

    var newButton = document.createElement('a');

    var image = document.createElement('img');                     
    image.src = 'img/theclosebutton.png';
    image.className = "popupImage";

    newButton.appendChild(image);

    myDiv.appendChild(newButton);

    newButton.onclick = function () {
        document.body.removeChild(myDiv);
        returnClick = true;
    };  
}

现在，我可以单击一次，然后再单击一次。

有什么建议么？

Answer 1

它仅被调用一次，因为在首次点击后clickable设置为false 。 我怀疑你正试图将它设置为true在popup通过调用-方法returnClick = true; 但所有操作都是设置您的参数值，而不是实际的clickable变量本身。

现在， clickable是init范围内的变量，因此popup无法访问它。 例如，您可以在init的父对象范围内将clickable var。 然后在popup ，您可以通过parentObject.clickable访问clickable。

//illustration of my example
parentObject {
  var clickable,
  function init()
}

function popup() {
  ...
  parentObject.clickable = true;
}

Answer 2

检查jquery的.one（）事件处理程序附件， 此 jquery的.one（）用于将处理程序附加到元素的事件。 每个事件类型的每个元素最多只能执行一次处理程序。 第二个是链接到有关重置.one（）的堆栈溢出问题的链接。希望这会有所帮助