首页 > 解决方案 > 如何在函数中获取事件(点击的元素)

问题描述

仍在学习 Javascript,但我尝试构建一个 not() 函数,它应该可以防止被点击的元素做任何其他事情。但不确定我如何找到并匹配以排除该元素做任何其他事情。

var X = (function () {

    'use strict';

    var Constructor = function (selector) {
        if (!selector) return;
        if (selector === 'document') {
            this.nodes = [document];
        } else if (selector === 'window') {
            this.nodes = [window];
        } else if(typeof selector === 'string') {
            this.nodes = document.querySelectorAll(selector);
        } else {
            this.nodes = Array.isArray(selector) ? selector : [selector];
        }
    };


Constructor.prototype.each = function (callback) {
    if (!callback || typeof callback !== 'function') return;
    for (var i = 0; i < this.nodes.length; i++) {
        callback(this.nodes[i], i);
    }
    return this;
};

Constructor.prototype.not = function (selector) {
    this.each(function (item) {
        if (item !== selector) {
            return;
        };
    });
    return this;
};

//addClass
//removeClass
//parent
//more

Constructor.prototype.on = function (eventName , selector, callback) {
    document.addEventListener(eventName, function(e) {
        for (var target = e.target; target && target !== this; target = target.parentNode) {
            if (target.matches(selector)) {
                callback.call(target, e);
                break;
            }
        }
    }, false);
};

    var init = function (selector) {
        return new Constructor(selector);
    };

    /**
     * Return the constructor instantiation
     */
    return init;

})();


X(‘body’).on(‘click’,’.btn’,function(e){

    X(this).addClass(‘active’);//works
    X(‘.btn’).removeClass(‘active’);//works

    X(‘.btn’).not(X(this)).removeClass(‘active’);//not working

    e.preventDefault();
});

标签: javascriptbuttononclick

解决方案


推荐阅读