检查按钮是不是被点击

Posted 2023-05-09

【中文标题】检查按钮是不是被点击

【英文标题】：Checking if button clicked检查按钮是否被点击

【发布时间】：2021-03-08 11:21:09

【问题描述】：

是否可以检查按钮事件是否（条件）onclick？因为如果用户点击弹出按钮，我想返回一个值

function showPopup()
    popup.style.visibility = "visible";
    popupButton.onclick = ()=>
        popup.style.visibility = "hidden";
    
    popupClose.onclick = () => 
        popup.style.visibility = "hidden";
      

【问题讨论】：

什么时候返回值？来自 showPopup 方法？如果是这样，那么没有。因为该方法使事件处理程序稍后发生。单击“稍后”时，该方法已经结束。

你的问题不清楚。你能解释一下你在找什么吗？

@Taplar 我明白了！谢谢你有什么想法吗？

@PraneetDixit 我只想在点击 popupButton 时返回一个真实值

从什么方法返回真值？

【参考方案1】：

我建议你这样做

window.addEventListener("load", () => 
  document.getElementById("popBut").addEventListener("click", e => 
    console.log("Open button clicked"); // here you can call something 
    document.getElementById("popup").classList.remove("hide");
  )
  document.querySelector("#popup div.close").addEventListener("click", e => 
    console.log("Close button clicked"); // here you can call something 
    document.getElementById("popup").classList.add("hide");
  )

)

.hide 
  display: none;


#popup 
  height: 100px;
  width: 100px;
  background-color: yellow;
  border: 1px solid black;


.close 
  display: inline-block;
  float: right

<button type="button" id="popBut">Show</button>

<div id="popup" class="hide"><div class="close">X</div>Here is a popup </div>

【讨论】：

可能是因为你没有真正回答问题......

@epascarello 也许现在？

【参考方案2】：

您正试图从异步调用中读取返回值。当返回触发时，其他代码已经完成运行。您需要使用 promise 并让其他代码在执行之前等待响应。

function askQuestion() 
  return new Promise(function(resolve, reject) 

    const msg = document.getElementById("msg");
    const btnYes = document.getElementById("btnYes");
    const btnNo = document.getElementById("btnNo");

    const cleanUp = function() 
      msg.classList.remove("active");
      btnYes.removeEventListener("click", yesFnc);
      btnNo.removeEventListener("click", noFnc);
    

    const yesFnc = function() 
      resolve(true);
      cleanUp();
    
    const noFnc = function() 
      resolve(false);
      cleanUp();
    

    btnYes.addEventListener("click", yesFnc);
    btnNo.addEventListener("click", noFnc);
    msg.classList.add("active");


  );


function example1 () 
  askQuestion().then(function(result)
    console.log("The answer was: ", result);
  );



async function example2 () 
  const result = await askQuestion()
  console.log("The answer was: ", result);


document.getElementById("test1").addEventListener("click", example1);
document.getElementById("test2").addEventListener("click", example2);

#msg 
  display: none;
  position: absolute;
  top: 0; left: 0;
  background-color: #CCC;
  border: 1px solid black;
  width: 300px;
  padding: 1em;


#msg.active 
  display: block;

<button id="test1">Example 1</button>
<button id="test2">Example 2</button>

<div id="msg">
  <h2>Do you like pie?</h2>
  <button id="btnYes" type="button">Yes</button>
  <button id="btnNo" type="button">No</button>
</div>