javascript - click事件如何实现点击调用不同的方法?
天蓬老师
天蓬老师 2017-04-10 16:09:21
[JavaScript讨论组]

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

天蓬老师
天蓬老师

欢迎选择我的课程,让我们一起见证您的进步~~

全部回复(4)
PHPz

不知道题主的意思是只点击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>
高洛峰

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

PHPz

看看jquery toggle API

迷茫
var isFirstTriggered=true;

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

function triggerEvent(){
    if(isFirstTriggered){
         handlerA();
         isFirstTriggered=false;
    }else{
         handlerB();
    }
}
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号