首页 > click事件如何实现点击调用不同的方法?

click事件如何实现点击调用不同的方法?

一个标签的点击事件怎么实现第一次点击调用A方法
第二次点击调用B方法?


var isFirstTriggered=true;

ele.addEventListener(type,function(){
   triggerEvent();  
},false);

function triggerEvent(){
    if(isFirstTriggered){
         handlerA();
         isFirstTriggered=false;
    }else{
         handlerB();
    }
}

看看jquery toggle API


方法1、计数(可以存到一个隐藏的input 或者某个隐藏标签内 或者某个标签的自定义属性)
方法2、重新绑定点击事件


http://.com/q/1010000003903335/a-1020000003904120

可以参考这个, 不同之处在于 上面是这个例子 是每次选中不同的DOM节点, 而你是要执行不同的函数.

ids = [A, B, C, D];

//在click里面用 下面的代码调用不同的函数
ids[clicktimes++]();

不知道题主的意思是只点击2次还是每点击一次,下一次的事件就切换,如果是后者,you can continue!

使用标记,点击一次重置一次标记的值即可,方法如下

var btn = document.getElementById('btn');

var tag = true;
btn.onclick = function() {
    if (tag == true) {
        alert('aaaaaaaa');
    } else {
        alert('bbbbbbbb');
    }
    tag = !tag;
}

当然,如果你想要自己的代码逼格高一点,你还可以这样

btn.onclick = function() {
    if (!arguments.callee['biewenwo']) {
        alert('aaaaaaaa');
    } else {
        alert('bbbbbbbb');
    }
    arguments.callee['biewenwo'] = !arguments.callee['biewenwo'];
}

代码逼格还可以来一次小小的升级

btn.onclick = function() {
    arguments.callee['biewenwhat'] ? bClick() : aClick();
    arguments.callee['biewenwhat'] = !arguments.callee['biewenwhat'];
}

完整代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input type="button" value="ClickMe" id="btn">
</body>

<script>
window.onload = function() {
    var btn = document.getElementById('btn');

    btn.onclick = function() {
        arguments.callee['biewenwhat'] ? bClick() : aClick();
        arguments.callee['biewenwhat'] = !arguments.callee['biewenwhat'];
    }

    function aClick() {
        alert('aaaaaaaaa');
    }
    function bClick() {
        alert('bbbbbbbbb');
    }
}
</script>
</html>
【热门文章】
【热门文章】