`
ghyghoo8
  • 浏览: 192808 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

用jquery.delegate()来实现点击 空白处后 消失

阅读更多
这两天,写了个公司项目的一个全站表情组件,尝试了一些技巧。特此记录,分享

1.绑定的事件中,获取事件源,调用hide方法,并传入事件源对象:
$(document).delegate("body", "click", function(e) {
        var ev = e || window.event; // 事件
        //var target = ev.target || ev.srcElement; // 获得事件源
        hide(ev.target || ev.srcElement, true);
    });

本来用的$(window),但是IE8之前的,貌似有bug。
$(document)不好之处,页面加载完后,会触发一次...

2.
hide方法中,判断该事件源是否从指定元素中发出,即事件源元素是不是指定元素的子元素或者其本身。

//子元素判断====
    if (!!window.find)HTMLElement.prototype.contains = function(B) {
        return this.compareDocumentPosition(B) - 19 > 0
    };

 function hide(dom, isClick) {
        var nn,t,_isClick = !!isClick;
        try {
            for (var n in objList) {
                nn = objList[n];
                t = nn.getOption("target")[0];
                if (_isClick && (t == dom || t.contains(dom)))return;
                if (!_isClick || !nn.box[0].contains(dom)) nn.hide();
            }
        } catch(e) {
        }
    }


3.上面的hide方法中,isClick变量 判断 是不是点击事件触发的。以便处理resize的监听。resize用settimeout作处理,降低内存消耗.
var reTime = null;
    $(window).bind("resize", function() {
        if (reTime) clearTimeout(reTime);
        reTime = setTimeout(hide, 50);
    });



PS:jquery.extend()真TM垃圾,来个二级json数据就不行了!!!我了个去!求改进啊~
underscore.js 的 _.extend()蛮好用!推荐噢~

2
0
分享到:
评论

相关推荐

    jquery-1.4.2.js和jquery.min-1.4.2.js

    `$(selector).click(function() {...})`用于为元素绑定点击事件,`.bind()`、`.live()`(此版本已废弃)、`.delegate()`等方法则支持更复杂的事件处理需求。同时,`$(document).ready()`确保在页面加载完成后执行...

    jquery-3.2.0.js,jquery-3.2.0.min.js

    **jQuery 是一个广泛使用的 JavaScript 库,它极大地简化了 JavaScript 的 DOM 操作、事件处理、动画设计以及Ajax交互。在本篇文章中,我们将深入探讨 jQuery 的核心特性、优点以及如何在实际项目中应用这两个文件:...

    jquery-1.7.2.js 、jquery-1.7.2.min.js 【官方jquery包 js】

    其中,`$.fn.on()`方法的引入,取代了之前的`$.fn.bind()`, `$.fn.live()`, `$.fn.delegate()`,提供了一种统一且高效的方式来绑定事件。 7. **兼容性**:jQuery 1.7.2对老版本浏览器有着良好的支持,包括IE6/7/8等...

    jquery-1.9.1.js 、jquery-1.9.1.min.js 【官方jquery包 js】

    `jquery-1.9.1.js`是未压缩的源代码版本,便于开发者阅读、调试和学习,而`jquery-1.9.1.min.js`是经过压缩和优化后的版本,体积更小,适用于生产环境,以提高页面加载速度。 jQuery 1.9.1版本是一个重要的里程碑,...

    jquery.chm

    使用.delegate()或.live()可以实现事件冒泡到祖先元素,适用于动态生成的元素。 五、动画效果 jQuery的动画功能强大,.animate()方法可以创建自定义动画,.fadeIn()、.fadeOut()、.slideToggle()等方法则提供了常见...

    jquery-migrate-3.0.0.js

    - **移除的API恢复**:例如,`.live()`、`.die()`、`.delegate()`等在jQuery 3.x中已被移除,Migrate 3.0.0会提供这些功能的替代实现。 - **非推荐方法警告**:对于不推荐使用但尚未被移除的方法,如`.attr(name, ...

    jquery-1.10.2.min.js

    同时,还提供了`.live()`, `.delegate()`, `.on()`等方法来处理动态加载的元素事件。 4. **动画效果**:jQuery的动画效果是其魅力之一,`fadeIn()`, `slideUp()`, `animate()`等方法让开发者可以轻松实现各种复杂的...

    jquery 最新版 v1.11.3 (1.x最新版)

    4. **`.delegate()`与`.live()`的弃用**:这两个方法在v1.11.3中已被移除,推荐使用`.on()`代替。 5. **`.unwrap()`方法**:此版本引入了一个新的方法,用于移除父元素,只保留被选元素,增强了DOM操作的灵活性。 ...

    jquery.js所有版本

    例如,一些旧的API函数在新版本中被标记为过时,如`.live()`, `.delegate()`, 而推荐使用`.on()`来处理事件绑定。此外,jQuery还引入了`.promise()`, `.done()`, `.fail()`等方法,以更好地支持异步编程和Promise...

    jquery-3.3.1.js/min.js

    此外,`.off()`用于移除事件绑定,`.trigger()`可以手动触发事件,`.delegate()`和`.live()`(在较新版本中已被`.on()`取代)则实现了事件委托,使得动态添加的元素也能响应事件。 三、动画效果 jQuery以其强大的...

    jquery-1.9.x.min.js

    在1.9.x版本中,jQuery移除了如`.live()`、`.delegate()`等已被`.on()`取代的函数,以及一些不再推荐使用的CSS选择器。这些改变鼓励开发者使用更现代、更高效的编程方式,同时也提醒他们注意代码的更新和维护。 5....

    jquery1.7+jquery for json 2.3

    总结来说,jQuery 1.7与jQuery JSON 2.3插件的结合使用,为开发者提供了强大而全面的JSON处理能力,同时通过jQuery 1.7的改进,让JavaScript编程变得更高效、更易于维护。无论是处理DOM操作、事件绑定还是AJAX通信,...

    jQuery.Cookbook(第1版)].源代码

    《jQuery Cookbook(第1版)》是一本深受前端开发者欢迎的指南,专注于使用jQuery这个强大的JavaScript库来简化网页交互和DOM操作。这本书的源代码包含了示例代码和书中的实践项目,是学习和理解jQuery核心功能及高级...

    jQuery.1.7.2(包括API)

    **"jquery 1.7 中文 api 修正版"** 提示这可能是jQuery 1.7.2的中文API文档,对于中文使用者来说非常方便,因为它提供了中文语言的解释,使得理解jQuery的各种方法和功能更加容易。这个文档通常包括了所有可用的函数...

    jquery-1.9.1.min.js

    总的来说,"jquery-1.9.1.min.js"是jQuery库的一个高效且可靠的版本,适合各种规模的项目使用。它的存在,让开发者得以专注于业务逻辑,而非底层的DOM操作和浏览器兼容性问题,极大地推动了Web开发的进步。

    jQuery-1.7.js

    1. **事件绑定优化**:在jQuery 1.7中,`.on()`方法替代了`.bind()`, `.live()`, 和 `.delegate()`,提供了一种统一的事件处理方式。`.on()`不仅支持直接绑定事件,还能进行事件委托,提高了代码的可维护性。 2. **...

    [jQuery基础教程.(英文原版)].Packt.Publishing.Learning.jQuery.1.3

    - **事件委托**:使用`.delegate()`或`.on()`(在新版中推荐)来实现事件委托,提高代码的灵活性和性能。 ##### 2.3 动画效果 - **基本动画**:利用`.fadeIn()`, `.fadeOut()`, `.slideUp()`, `.slideDown()`等方法...

    jquery1.4.4.min最新

    1. **延迟加载(Lazy Loading)**:在页面不需立即使用jQuery时,可使用`$(document).ready()`确保DOM加载完成后再执行相关代码。 2. **缓存引用(Caching)**:频繁使用的jQuery对象应存储在变量中,避免多次DOM...

    简单的delegate实现

    在需要使用委托的对象中,通常会有一个属性来存储Delegate。例如,在UIControl的子类中,我们可以设置一个Delegate属性: ```objc @interface CustomButton : UIButton @property (nonatomic, weak) id...

    Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解

    在我们日常开发中经常会使用到.bind()、.live()、.delegate()和.on(),有些同学会对这四者存在一些疑虑,所以下面这篇文章主要给大家介绍了关于Jquery中.bind()、.live()、.delegate()和.on()之间区别的相关资料,...

Global site tag (gtag.js) - Google Analytics