首页 > Web开发 > 详细

jquery按钮绑定特殊事件

时间:2017-02-13 18:57:26      阅读:238      评论:0      收藏:0      [点我收藏+]

本文主要介绍点击一个按钮处理事件的一些特殊情况和技巧。

一、第一次点击触发一个函数,之后点击都触发另一个函数

1、小白实现

技术分享

2、大神实现

代码如下:

<body>
<button>click me</button>
    <script>
    function bind(func1, func2) {
        let func = null
        return function() {
            (!func ? (func = func2, func1) : func).apply(this, arguments)
        }
    }

    $(button).click(bind(()=>{alert(1)}, ()=>{alert(2)}));
    </script>
</body>

说明2点:

1、let定义的变量是块级的变量。

while(1){
    let let1 = 2;
    var var1 = 2;
}
alert(let1);  //不可访问
alert(var1);  //可以访问

2、(func = func2, func1)

javascript 逗号表达式,从左到右执行每个子表达式,并将最后一个子表达式的值作为整个表达式的值。=优先级高于,(点击了解更多)。所以这个表达式先将func2赋给func,然后整个表达式的值取func1。

二、 点击按钮只调用一次事件处理

1、实现

同样也可以通过判断全局变量flag为是否为true来处理。

这里介绍一个jquery的one方法。

$("button").one("click", function() {
    alert("This will be displayed only once.");
});

了解更多可参考:http://www.jquery123.com/one/

原理就是当第一次触发以后,我们就立即删除该句柄。

// 注意:前提是我们已经定于好了addEvent/removeEvent函数
// (定义好了才能使用哦)  

var myIntro = document.getElementById(‘intro‘);
addEvent(myIntro, ‘click‘, oneClickOnly);

function oneClickOnly() {
    alert(‘WOW!‘);
    removeEvent(myIntro, ‘click‘, oneClickOnly);
} 

2、实际应用

场景:工作中有遇到这种情况,如下,点“系统消息”代表全部系统消息都读了。

技术分享

之前做的就是click时调用readMsg(),事实上这样每点击一次就会触发请求一次接口,可以通过只点击一次来优化页面性能。

   //在点击系统消息tab的时候置为已读
   $("li[data-href=‘tabs02‘] h2").one("click", function() {
      readMsg("sys", "all");
    }); 

 

 

本文作者starof,因知识本身在变化,作者也在不断学习成长,文章内容也不定时更新,为避免误导读者,方便追根溯源,请诸位转载注明出处:http://www.cnblogs.com/starof/p/4904929.html有问题欢迎与我讨论,共同进步。

jquery按钮绑定特殊事件

原文:http://www.cnblogs.com/starof/p/6394424.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!