javascript - 如何在函数中获取事件(点击的元素)
问题描述
仍在学习 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();
});
解决方案
推荐阅读
- perl - `print $fh <<'EOF'`中的here-doc问题:Perl执行here doc
- xaml - 如何在 UWP 中将 WebView 转换为 IRandomAccessStream?
- laravel - 客户端尝试使用旧密码连接到 redis
- python - Python - 如何在 django 模板中为所有值并排显示两个键的字典值
- python - 为什么梯度带张量流使张量的总和?
- c# - 尝试设置配置值`IHostBuilder`,但未反映在启动类中的 ConfigureServices - asp.net core 3.1
- sorting - 颤动按日期对数组列表进行排序
- javascript - “字符串”类型上不存在 Typescript 属性“标签”
- aws-lambda - 如何在 CodeBuild 中为 Lambda 函数添加 Python 库依赖项
- java - Spring Boot JPA 获取列表并向其中添加项目会引发错误