magix icon indicating copy to clipboard operation
magix copied to clipboard

非冒泡事件的处理

Open xinglie opened this issue 8 years ago • 1 comments

在magix项目中,所有事件都是绑定在body上的。利用事件的冒泡,在body上监听到相应的事件后,查找包含mx-eventType的节点与对应的处理事件的view。

 对于$win与$doc是2个特殊的节点,这2个是直接绑定,其它事件均是代理在body上

对于一些不冒泡的事件,如节点的scroll事件,img的load、error事件等无法通过类似mx-error进行方便的监听

xinglie avatar Jul 13 '17 03:07 xinglie

如果只考虑ie9以后的浏览器,我们可以使用useCapture=true来对这些不冒泡的事件进行处理,如

(function($) {
    var fixEvent = function(fix) {
        var handler = function(event) {
            jQuery.event.simulate(fix, event.target, jQuery.event.fix(event));
        };
        var attaches = 0;

        $.event.special[fix] = {
            setup: function() {
                var doc = this.ownerDocument || this,
                    body = doc.body;

                if (!attaches) {
                    body.addEventListener(fix, handler, true);
                }
                attaches++;
            },
            teardown: function() {
                var doc = this.ownerDocument || this,
                    body = doc.body;
                attaches--;

                if (!attaches) {
                    body.removeEventListener(fix, handler, true);
                }
            }
        };
    };
    var fixes = ['scroll', 'load', 'error'];
    for (var i = 0; i < fixes.length; i++) {
        var fix = fixes[i];
        fixEvent(fix);
    }
})(jQuery);

这里使用jquery来演示如何把scroll,load,error处理成冒泡事件。 然后就可以mx-scroll来使用它们了

xinglie avatar Jul 13 '17 03:07 xinglie