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无法访问它。例如，您可以在clickable的父对象的范围内创建init变量。然后在popup中，您可以通过parentObject.clickable进行点击访问。

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

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

Answer 2

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

使用Javascript的模态弹出窗口

2 个答案: