Question

嘿，我只使用javascript + html。

单击按钮两次（或更多次）后是否有任何方法可以激活功能？我希望按钮在第一次点击时不做任何事情。

Answer 1

有两种方法可以做到这一点，一种方法是在html按钮中设置一个数据属性，用于标识点击是否已完成。

<button id="btn">Click Me!</button>

<script>
var clickedAlready = false;

document.getElementById('btn').onclick = function() {
  if (clickedAlready) {
//do something...
}
else
  clickedAlready = true; 
}
</script>

虽然全局变量不是处理它的最佳方式，但这会给你一个想法。另一种选择是将值存储在隐藏的输入中，并修改该值以确定它是否是第一次点击。

Answer 2

对于“双击”，当用户快速按两次鼠标按钮（例如在桌面上打开程序）时，您可以使用事件监听器dblclick代替click事件

https://developer.mozilla.org/en-US/docs/Web/Reference/Events/dblclick

有关快速示例，请查看以下代码。 http://jsfiddle.net/jzQa9/ 此代码仅为“item”的HTMLElement创建一个事件侦听器，该侦听器使用getElementById找到。

<div id="item" style="width:15px;height:15px;background-color:black;"></div>

<script>
    var item = document.getElementById('item');
    item.addEventListener('dblclick',function(e) {
        var target = e.target || e.srcElement;
        target.style.backgroundColor = 'red';
    },false);
</script>

至于希望用户单击X次以使其最终执行操作，您可以执行以下操作。 http://jsfiddle.net/5xbPG/ 下面的代码的工作原理是向HTMLElement添加一个点击跟踪器，并在每次点击时增加点击次数。我选择将点击保存到HTMLElement而不是变量，但无论哪种方式都可以。

<div id="item" style="width:15px;height:15px;background-color:black;"></div>

<script>
    var item = document.getElementById('item');
    item.addEventListener('click',function(e) {
        var target = e.target || e.srcElement;
        var clicks = 0;
        if(target.clicks)
            clicks = target.clicks;
        else
            target.clicks = 0;
        if(clicks >= 4) {
           target.style.backgroundColor = 'red';
        }
        target.clicks += 1;
    },false);
</script>

==更新==

由于您最近发布了一条评论，您希望点击两个不同的按钮才能执行某项操作，您可能希望执行以下操作... http://jsfiddle.net/9GJez/ 此代码的工作方式是设置两个变量（或更多）以跟踪是否已单击元素。我们在单击该项目时更改这些变量。对于更改单击状态的布尔值结束时的每个事件侦听器，我们运行函数checkClick，这将确保单击所有按钮。如果点击它们，我们就会运行我们的代码。这段代码可以清理，使其更具可移植性和可扩展性，但这应该可以帮助您入门。

<input type="button" id="button1">
<input type="button" id="button2">
<div id="result" style="width:15px;height:15px;background-color:black;"></div>

<script>
var result = document.getElementById('result');
var button1 = document.getElementById('button1');
var button2 = document.getElementById('button2');

var button1Clicked = false;
var button2Clicked = false;

button1.addEventListener('click',function(e) {
    button1Clicked = true;
    checkClick();
},false);
button2.addEventListener('click',function(e) {
    button2Clicked = true;
    checkClick();
},false);

function checkClick() {
   if(button1Clicked && button2Clicked) {
      result.style.backgroundColor = 'red';
   }
}
</script>

Answer 3

也许是这样的？

var numberTimesClicked = 0;
function clickHandler() {
    if (numberTimesClicked > 0) {
        // do something...
    }
    numberTimesClicked++;
}

document.getElementById("myBtn").addEventListener("click", clickHandler);

两次onclicks后激活功能

3 个答案: