如何知道在Javascript中点击某个特定按钮的时间？

Question

I'm making a function that displays a modal, and the modal has two buttons. 我正在制作一个显示模态的功能，而模态有两个按钮。 I want this function to wait until one of the two buttons has been clicked, and return a value that corresponds to which button is clicked. 我希望此函数等到单击两个按钮之一，然后返回与单击哪个按钮对应的值。

Here's a sample code that I came up with: 这是我提出的示例代码：

function myFunc()
{
  var val=0;
  buttonA = document.getElementById('buttonA');
  buttonB = document.getElementById('buttonB');
  buttonA.onclick = function(){
    //do something
    val = 1;
  }
  buttonB.onclick = function(){
    //do something
    val = 2;
  }
  while(val == 0);
  return val;
}

The problem in this code is that the page becomes unresponsive because of the infinite loop, hence it isn't possible to change the value of val once initialised. 此代码中的问题是由于无限循环，页面变得无响应，因此初始化后无法更改val的值。

To be more precise, I want the main thread (on which myFunc is being implemented) to sleep until one of the other two threads (each of buttonA and buttonB) is clicked. 更确切地说，我希望主线程（在其上实现myFunc）才能进入休眠状态，直到单击其他两个线程（每个buttonA和buttonB）。

Is there some other work-around for this ? 还有其他一些解决办法吗？ Please answer in Javascript only (no jQuery). 请回答Javascript（没有jQuery）。 Thanks. 谢谢。

Answer 1

Try something more like this: 尝试更像这样的东西：

function myFunc()
{
  buttonA = document.getElementById('buttonA');
  buttonB = document.getElementById('buttonB');
  buttonA.onclick = function(){
    //do something
    differentFunc(1)
  }
  buttonB.onclick = function(){
    //do something
    differentFunc(2)
  }
}

This is a different way to make the function more versatile (edited per your comment): 这是使功能更通用的不同方式（根据您的评论编辑）：

function myFunc(callback)
{
  buttonA = document.getElementById('buttonA');
  buttonB = document.getElementById('buttonB');
  buttonA.onclick = function(){
    //do something
    callback(1)
  }
  buttonB.onclick = function(){
    //do something
    callback(2)
  }
}

and call it like 并称之为

myFunc(function(result) {
    // do stuff with result
    }

Javascript is naturally single-threaded. Javascript自然是单线程的。 Any code that waits infinitely like that will cause a hangup and disallow input. 任何等待无限的代码都会导致挂起并禁止输入。 There are ways to write async functions, namely using Promises like I did for a minute there, but it's generally easier to make your code work synchronously. 有一些方法可以编写异步函数，就像我在那里使用Promise一样，但通常更容易让你的代码同步工作。

Answer 2

If I understand the OP's purpose is to create a modal with 2 choices like a confirm() ? 如果我理解OP的目的是创建一个带有2个选项的模态，比如confirm() ？ But for some reason confirm() isn't suitable? 但由于某种原因， confirm()不适合？ So a value on each button and it waits for user interaction? 那么每个按钮上的值是否等待用户交互？ Unless I'm missing something fairly important, I have made a dynamically generated modal (no manual markup) that has 2 buttons. 除非我遗漏了一些相当重要的东西，否则我已经制作了一个动态生成的模态（没有手动标记），它有2个按钮。 The purpose and result elude me so I left it with one event listener and a function with a simple ternary condition to which the alerts can be replaced by appropriate statements or expression at OP's discretion. 目的和结果让我不知所以我留下了一个事件监听器和一个具有简单三元条件的函数，警报可以由OP自行决定用适当的语句或表达式代替。

SNIPPET SNIPPET

 <!doctype html> <html> <head> <meta charset="utf-8"> <style> .modal { position: fixed; top: 0; left: 0; height: 100vh; width: 100vw; background:transparent; } .ui { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: table-cell; border: 3px ridge grey; border-radius: 6px; } button { font-size: 24px; } </style> </head> <body> <script> var frag = document.createDocumentFragment(); var modal = document.createElement('div'); var ui = document.createElement('div'); var on = document.createElement('button'); var off = document.createElement('button'); modal.className = 'modal'; ui.className = 'ui'; on.id = 'on'; on.textContent = 'On'; off.id = 'off'; off.textContent = 'Off'; frag.appendChild(modal); modal.appendChild(ui); ui.appendChild(on); ui.appendChild(off); ui.addEventListener('click', status, false); function status(e) { var tgt = e.target.id; tgt === 'on' ? alert('ON!') : alert('OFF!'); } document.body.appendChild(frag); </script> </body> </html>

如何知道在Javascript中点击某个特定按钮的时间？

问题描述

2 个解决方案

解决方案1
0 已采纳 2016-10-05 14:36:18

解决方案2
0 2016-10-05 16:07:36

SNIPPET SNIPPET

如何知道在Javascript中点击某个特定按钮的时间？

问题描述

2 个解决方案

解决方案1 0 已采纳 2016-10-05 14:36:18

解决方案2 0 2016-10-05 16:07:36

SNIPPET SNIPPET

解决方案1
0 已采纳 2016-10-05 14:36:18

解决方案2
0 2016-10-05 16:07:36